Collection of React Hooks


You can add your hooks by opening a pull-request at https://github.com/nikgraf/react-hooks.

Found 328 entries

marconi/use-abortable-stream-fetch
import useAbortableStreamFetch from 'use-abortable-stream-fetch';
ctrlplusb/easy-peasy
import { useActions } from 'easy-peasy';
sandiiarov/use-events
import { useActive } from 'use-events';
beizhedenglong/react-hooks-lib
import { useActive } from 'react-hooks-lib'
withvoid/melting-pot
import { useActive } from '@withvoid/melting-pot';
kalcifer/react-powerhooks
import { useActive } from 'react-powerhooks';
kitze/react-hanger
import { useArray } from 'react-hanger';
streamich/react-use
import { useAsync } from 'react-use';
slorber/react-async-hook
import { useAsync } from 'react-async-hook';
streamich/react-use
import { useAudio } from 'react-use';
csfrequency/react-firebase-hooks
import { useAuthState } from 'react-firebase-hooks/auth';
use-hooks/react-hooks-axios
import { useAxios } from '@use-hooks/axios';
zakariaharti/react-hookedup
import { useBoolean } from 'react-hookedup';
kitze/react-hanger
import { useBoolean } from 'react-hanger';
raathigesh/retoggle
import { useBooleanKnob } from 'retoggle';
imbhargav5/rooks
import useBoundingclientrect from '@rooks/use-boundingclientrect';
AvraamMavridis/react-window-communication-hook
import useBrowserContextCommunication from 'react-window-communication-hook';
zcallan/use-browser-history
import useBrowserHistory from 'use-browser-history'
facebook/react
import { useCallback } from 'react';
streamich/react-use
import { useCallbag } from 'react-use';
Andarist/use-callbag
import useCallbag from 'use-callbag';
sandiiarov/use-events
import { useClickOutside } from 'use-events';
danoc/react-use-clipboard
import useClipboard from 'react-use-clipboard';
csfrequency/react-firebase-hooks
import { useCollection } from 'react-firebase-hooks/firestore';
raathigesh/retoggle
import { useColorKnob } from 'retoggle';
rehooks/component-size
import useWindowSize from '@rehooks/component-size';
facebook/react
import { useContext } from 'react';
streamich/react-use
import { useCounter } from 'react-use';
zakariaharti/react-hookedup
import { useCounter } from 'react-hookedup';
imbhargav5/rooks
import useCounter from '@rooks/use-counter';
frontarm/navi
import { useCurrentRoute } from 'react-navi';
yeskunall/react-dom-status-hook
import useDOMState from '@yeskunall/react-dom-status-hook';
donavon/use-dark-mode
import useDarkMode from 'use-dark-mode';
donavon/use-dark-mode
import useDarkMode from 'use-dark-mode';
xnimorz/use-debounce
import { useDebounce } from 'use-debounce
streamich/react-use
import { useDebounce } from 'react-use';
gregnb/use-detect-print
import useDetectPrint from 'use-detect-print'
palmerhq/the-platform
import useDeviceMotion from 'the-platform';
palmerhq/the-platform
import useDeviceOrientation from 'the-platform';
imbhargav5/rooks
import useDidMount from '@rooks/use-did-mount';
withvoid/melting-pot
import { useDidMount } from '@withvoid/melting-pot';
beizhedenglong/react-hooks-lib
import { useDidMount } from 'react-hooks-lib'
imbhargav5/rooks
import useDidUpdate from '@rooks/use-did-update';
beizhedenglong/react-hooks-lib
import { useDidUpdate } from 'react-hooks-lib'
CharlesStover/use-dimensions
import useDimensions from 'use-dimensions';
csfrequency/react-firebase-hooks
import { useDocument } from 'react-firebase-hooks/firestore';
rehooks/document-title
import useDocumentTitle from '@rehooks/document-title';
rehooks/document-visibility
import useWindowSize from '@rehooks/document-visibility';
forthealllight/dom-location
import useDomLocation from 'dom-location';
csfrequency/react-firebase-hooks
import { useDownloadUrl } from 'react-firebase-hooks/storage';
facebook/react
import { useEffect } from 'react';
shiningjason/react-enhanced-reducer-hook
import useEnhancedReducer from 'react-enhanced-reducer-hook'
LeetCode-OpenSource/rxjs-hooks
import { useEventCallback } from 'rxjs-hooks'
donavon/use-event-listener
import useEventListener from '@use-it/event-listener';
streamich/react-use
import { useFavicon } from 'react-use';
ilyalesik/react-fetch-hook
import { useFetch } from 'react-fetch-hook';
beizhedenglong/react-hooks-lib
import { useFetch } from 'react-hooks-lib'
bghveding/use-fetch
import { useFetch } from '@bjornagh/use-fetch';
beizhedenglong/react-hooks-lib
import { useField } from 'react-hooks-lib'
beizhedenglong/react-hooks-lib
import { useFocus } from 'react-hooks-lib'
zakariaharti/react-hookedup
import { useFocus } from 'react-hookedup';
sandiiarov/use-events
import { useFocus } from 'use-events';
CharlesStover/use-force-update
import useForceUpdate from 'use-force-update';
revelcw/react-hooks-helper
import { useForm } from 'react-hooks-helper';
withvoid/melting-pot
import { useFormField } from '@withvoid/melting-pot';
wsmd/react-use-form-state
import { useFormState } from 'react-use-form-state';
palmerhq/the-platform
import useGeoPosition from 'the-platform';
streamich/react-use
import { useGetSet } from 'react-use';
streamich/react-use
import { useGetSetState } from 'react-use';
capaj/use-graphql-request
import { setupClient } from 'use-graphql-request'
frontarm/navi
import { useHistory } from 'react-navi';
JohannesKlauss/react-hotkeys-hook
import useHotkeys from 'react-hotkeys-hook'
zakariaharti/react-hookedup
import { useHover } from 'react-hookedup';
withvoid/melting-pot
import { useHover } from '@withvoid/melting-pot';
sandiiarov/use-events
import { useHover } from 'use-events';
beizhedenglong/react-hooks-lib
import { useHover } from 'react-hooks-lib'
use-hooks/react-hooks-image-size
import useImageSize from '@use-hooks/image-size';
mweststrate/use-immer
import { useImmerReducer } from 'use-immer';
sin/react-immer-hooks
import { useImmerState } from 'react-immer-hooks'
facebook/react
import { useImperativeMethods } from 'react';
imbhargav5/rooks
import useInput from '@rooks/use-input';
zakariaharti/react-hookedup
import { useInput } from 'react-hookedup';
kitze/react-hanger
import { useInput } from 'react-hanger';
rehooks/input-value
import useInputValue from '@rehooks/input-value';
krvajal/use-intercom-hook
import useIntercom from 'use-intercom-hook';
AvraamMavridis/react-intersection-visible-hook
import useIntersectionVisible from 'react-intersection-visible-hook';
use-hooks/react-hooks-interval
import useInterval from '@use-hooks/interval';
zakariaharti/react-hookedup
import { useInterval } from 'react-hookedup';
donavon/use-interval
import useInterval from '@use-it/interval';
kalcifer/react-powerhooks
import { useInterval } from 'react-powerhooks';
withvoid/melting-pot
import { useInterval } from '@withvoid/melting-pot';
dispix/react-pirate
import { useInterval } from 'react-pirate'
imbhargav5/rooks
import useInterval from '@rooks/use-interval';
imbhargav5/rooks
import useKey from '@rooks/use-key';
streamich/react-use
import { useKeyPress } from 'react-use';
withvoid/melting-pot
import { useKeyPress } from '@withvoid/melting-pot';
facebook/react
import { useLayoutEffect } from 'react';
dispix/react-pirate
import { useLegacyUnmount } from 'react-pirate'
dispix/react-pirate
import { useLegacyUpdate } from 'react-pirate'
kitze/react-hanger
import { useLifecycleHooks } from 'react-hanger';
zakariaharti/react-hookedup
import { useLifecycleHooks } from 'react-hookedup';
streamich/react-use
import { useLifecycles } from 'react-use';
csfrequency/react-firebase-hooks
import { useList } from 'react-firebase-hooks/database';
streamich/react-use
import { useList } from 'react-use';
csfrequency/react-firebase-hooks
import { useListKeys } from 'react-firebase-hooks/database';
csfrequency/react-firebase-hooks
import { useListVals } from 'react-firebase-hooks/database';
frontarm/navi
import { useLoadingRoute } from 'react-navi';
streamich/react-use
import { useLocalStorage } from 'react-use';
rehooks/local-storage
import useLocalStorage from '@rehooks/local-storage';
imbhargav5/rooks
import useLocalstorage from '@rooks/use-localstorage';
streamich/react-use
import { useLogger } from 'react-use';
kalcifer/react-powerhooks
import { useMap } from 'react-powerhooks';
streamich/react-use
import { useMap } from 'react-use';
palmerhq/the-platform
import useMedia from 'the-platform';
streamich/react-use
import { useMediaDevices } from 'react-use';
lessmess-agency/react-media-hook
import { useMediaPredicate } from 'react-media-hook';
facebook/react
import { useMemo } from 'react';
beizhedenglong/react-hooks-lib
import { useMergeState } from 'react-hooks-lib'
zakariaharti/react-hookedup
import { useMergeState } from 'react-hookedup';
DanShai/useMermaid-hook
import { useMermaid } from './useMermaid';
haldarmahesh/use-mobile-detect-hook
import useMobileDetect from 'use-mobile-detect-hook
streamich/react-use
import { useMount } from 'react-use';
dispix/react-pirate
import { useMount } from 'react-pirate'
imbhargav5/rooks
import useMouse from '@rooks/use-mouse';
sandiiarov/use-events
import { useMousePosition } from 'use-events';
olup/react-hook-mousetrap
import useMousetrap from 'react-hook-mousetrap'
facebook/react
import { useMutationEffect } from 'react';
imbhargav5/rooks
import useMutationObserver from '@rooks/use-mutation-observer';
imbhargav5/rooks
import useNavigatorLanguage from '@rooks/use-navigator-language';
rehooks/network-status
import useNetworkStatus from '@rehooks/network-status';
palmerhq/the-platform
import useNetworkStatus from 'the-platform';
21kb/react-hooks
import useNotification from '@21kb/react-notification-hook';
kitze/react-hanger
import { useNumber } from 'react-hanger';
raathigesh/retoggle
import { useNumberKnob } from 'retoggle';
csfrequency/react-firebase-hooks
import { useObject } from 'react-firebase-hooks/database';
raathigesh/retoggle
import { useObjectKnob } from 'retoggle';
thers/use-object-state
import { useObjectState } from 'use-object-state'
csfrequency/react-firebase-hooks
import { useObjectVal } from 'react-firebase-hooks/database';
streamich/react-use
import { useObservable } from 'react-use';
21kb/react-hooks
import { useOfflineStatus } from '@21kb/react-online-status-hook';
zakariaharti/react-hookedup
import { useOnLineStatus } from 'react-hookedup';
kitze/react-hanger
import { useOnMount } from 'react-hanger';
zakariaharti/react-hookedup
import { useOnMount } from 'react-hookedup';
kitze/react-hanger
import { useOnUnmount } from 'react-hanger';
zakariaharti/react-hookedup
import { useOnUnmount } from 'react-hookedup';
imbhargav5/rooks
import useOnline from '@rooks/use-online';
21kb/react-hooks
import { useOnlineStatus } from '@21kb/react-online-status-hook';
withvoid/melting-pot
import { useOnlineStatus } from '@withvoid/melting-pot';
rehooks/online-status
import useOnlineStatus from '@rehooks/online-status';
beizhedenglong/react-hooks-lib
import { useOnlineStatus } from 'react-hooks-lib'
21kb/react-hooks
import useOrientation from '@21kb/react-device-orientation-hook';
streamich/react-use
import { useOutsideClick } from 'react-use';
imbhargav5/rooks
import useOutsideClick from '@rooks/use-outside-click';
wouterraateland/use-pan-and-zoom
import usePanZoom from 'use-pan-and-zoom';
donavon/use-persisted-state
import createPersistedState from 'use-persisted-state';
tranbathanhtung/usePosition
import usePosition from '@rehooks/usePosition';
kitze/react-hanger
import { usePrevious } from 'react-hanger';
imbhargav5/rooks
import usePrevious from '@rooks/use-previous';
Andarist/use-previous
import usePrevious from 'use-previous';
zakariaharti/react-hookedup
import { usePrevious } from 'react-hookedup';
dispix/react-pirate
import { usePrevious } from 'react-pirate'
staltz/use-profunctor-state
import useProfunctorState from '@staltz/use-profunctor-state';
aiven715/promise-hook
import { usePromise } from 'promise-hook';
alexanderson1993/react-qrcode-hook
import useQrCode from 'react-qrcode-hook';
imbhargav5/rooks
import useRaf from '@rooks/use-raf';
raathigesh/retoggle
import { useRangeKnob } from 'retoggle';
raathigesh/retoggle
import { useRangesKnob } from 'retoggle';
flepretre/use-redux
import { useRedux } from 'use-redux';
facebook/react
import { useRef } from 'react';
streamich/react-use
import { useRefMounted } from 'react-use';
schettino/react-request-hook
import {useRequest} from 'react-request-hook';
schettino/react-request-hook
import {useResource} from 'react-request-hook';
ckedwards/react-form-stateful
import { useSFControl } from 'react-form-stateful';
ckedwards/react-form-stateful
import { useSFError } from 'react-form-stateful';
ckedwards/react-form-stateful
import { useSFValue } from 'react-form-stateful';
CharlesStover/use-dimensions
import { useScreenDimensions } from 'use-dimensions';
withvoid/melting-pot
import { useScreenType } from '@withvoid/melting-pot';
pankod/react-hooks-screen-type
import useScreenType from 'react-hooks-screen-type';
palmerhq/the-platform
import useScript from 'the-platform';
neo/react-use-scroll-position
import { useScrollPosition } from 'react-use-scroll-position';
neo/react-use-scroll-position
import { useScrollXPosition } from 'react-use-scroll-position';
neo/react-use-scroll-position
import { useScrollYPosition } from 'react-use-scroll-position';
imbhargav5/rooks
import useSelect from '@rooks/use-select';
raathigesh/retoggle
import { useSelectKnob } from 'retoggle';
streamich/react-use
import { useSessionStorage } from 'react-use';
imbhargav5/rooks
import useSessionStorage from '@rooks/use-sessionstorage';
streamich/react-use
import { useSetState } from 'react-use';
kitze/react-hanger
import { useSetState } from 'react-hanger';
streamich/react-use
import { useSize } from 'react-use';
mfrachet/use-socketio
import { ClientSocket, useSocket } from 'use-socketio';
iamgyz/use-socket.io-client
import useSocket from 'use-socket.io-client';
streamich/react-use
import { useSpeech } from 'react-use';
drcmda/react-spring
import { useSpring } from 'react-spring';
marceloadsj/react-indicative-hooks
import { useStateValidator } from 'react-indicative-hooks';
kitze/react-hanger
import { useStateful } from 'react-hanger';
revelcw/react-hooks-helper
import { useStep } from 'react-hooks-helper';
ctrlplusb/easy-peasy
import { useStore } from 'easy-peasy';
mfrachet/reaktion
import { useStore } from 'reaktion';
iusehooks/redhooks
import { useStore } from 'redhooks';
palmerhq/the-platform
import useStylesheet from 'the-platform';
philipp-spiess/use-substate
import { SubstateProvider, useSubstate } from 'use-substate';
streamich/use-t
import {Provider, useT} from 'use-t';
raathigesh/retoggle
import { useTextKnob } from 'retoggle';
imbhargav5/rooks
import useTimeAgo from '@rooks/use-time-ago';
raathigesh/retoggle
import { useTimemachine } from 'retoggle';
zakariaharti/react-hookedup
import { useTimeout } from 'react-hookedup';
imbhargav5/rooks
import useWindowSize from '@rooks/use-timeout';
streamich/react-use
import { useTimeout } from 'react-use';
dispix/react-pirate
import { useTimeout } from 'react-pirate'
withvoid/melting-pot
import { useTitle } from '@withvoid/melting-pot';
streamich/react-use
import { useTitle } from 'react-use';
kalcifer/react-powerhooks
import { useToggle } from 'react-powerhooks';
withvoid/melting-pot
import { useToggle } from '@withvoid/melting-pot';
streamich/react-use
import { useToggle } from 'react-use';
dispix/react-pirate
import { useToggle } from 'react-pirate'
imbhargav5/rooks
import useToggle from '@rooks/use-toggle';
withvoid/melting-pot
import { useTouch } from '@withvoid/melting-pot';
sandiiarov/use-events
import { useTouch } from 'use-events';
beizhedenglong/react-hooks-lib
import { useTouch } from 'react-hooks-lib'
streamich/react-use
import { useTween } from 'react-use';
contiamo/operational-ui
import { useURLState } from '@operational/components';
dispix/react-pirate
import { useUnmount } from 'react-pirate'
streamich/react-use
import { useUnmount } from 'react-use';
withvoid/melting-pot
import { useUpdate } from '@withvoid/melting-pot';
streamich/react-use
import { useUpdate } from 'react-use';
dispix/react-pirate
import { useUpdate } from 'react-pirate'
marceloadsj/react-indicative-hooks
import { useValidate } from 'react-indicative-hooks';
marceloadsj/react-indicative-hooks
import { useValidateAll } from 'react-indicative-hooks';
21kb/react-hooks
import useVibration from '@21kb/react-vibration-hook';
streamich/react-use
import { useVideo } from 'react-use';
use-hooks/react-hooks-video-meta
import useVideoMeta from '@use-hooks/video-meta';
imbhargav5/rooks
import useVisibilitySensor from '@rooks/use-visibility-sensor';
21kb/react-hooks
import useVisible from '@21kb/react-page-visible-hook';
streamich/react-use
import { useWait } from 'react-use';
imbhargav5/rooks
import useWillUnmount from '@rooks/use-will-unmount';
beizhedenglong/react-hooks-lib
import { useWillUnmount } from 'react-hooks-lib'
CharlesStover/use-dimensions
import { useWindowDimensions } from 'use-dimensions';
rehooks/window-scroll-position
import useWindowScrollPosition from '@rehooks/window-scroll-position';
withvoid/melting-pot
import { useWindowScrollPosition } from '@withvoid/melting-pot';
palmerhq/the-platform
import useWindowScrollPosition from 'the-platform';
imbhargav5/rooks
import useWindowSize from '@rooks/use-window-size';
palmerhq/the-platform
import useWindowSize from 'the-platform';
rehooks/window-size
import useWindowSize from '@rehooks/window-size';
contiamo/operational-ui
import { useGlobal } from '@operational/components';
withvoid/melting-pot
import { useWindowSize } from '@withvoid/melting-pot';
imbhargav5/rooks
import useWorker from '@rooks/use-worker';
beizhedenglong/react-hooks-lib
import { createContextState } from 'react-hooks-lib'
beizhedenglong/react-hooks-lib
import { createGlobalState } from 'react-hooks-lib'
dai-shi/react-hooks-global-state
import { createGlobalState } from 'react-hooks-global-state';
streamich/react-use
import { createMemo } from 'react-use';
donavon/use-persisted-state
import createPersistedState from 'use-persisted-state'
Andarist/react-selector-hooks
import { createSelector } from 'react-selector-hooks';
Andarist/react-selector-hooks
import { createStateSelector } from 'react-selector-hooks';
Andarist/react-selector-hooks
import { createStructuredSelector } from 'react-selector-hooks';
pedronasser/resynced
import { createSynced } from 'resynced'
pedronasser/resynced
import { createSyncedRedux } from 'resynced'
21kb/react-hooks
import reactDomStatusHook from '@21kb/react-dom-status-hook';
21kb/react-hooks
import reactWindowFocusHook from '@21kb/react-window-focus-hook';