Collection of React Hooks

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

import useAbortableStreamFetch from 'use-abortable-stream-fetch';

import { useAPI } from 'react-api-hooks';

import useAbortableFetch from 'use-abortable-fetch'

import { useActions } from 'easy-peasy';

import { useActive } from 'react-hooks-lib'

import { useActive } from 'react-powerhooks';

import { useActive } from 'use-events';

import { useActive } from '@withvoid/melting-pot';

import { useAdjustColor } from 'react-recipes';

import useApi from 'use-http-api';

import { useApolloClient } from 'react-apollo-hooks'

import { useApolloMutation } from 'react-apollo-hooks'

import { useApolloQuery } from 'react-apollo-hooks'

import { useArray } from 'react-recipes';

import { useArray } from 'react-hanger';

import { useArray } from 'react-hookedup';

import { useAsync } from 'react-recipes';

import { useAsync } from 'react-async-hook';

import { useAsync } from 'react-use';

import { useAsync } from 'react-use-async';

import { useAsyncCall } from 'use-call'

import { useAsyncRetry } from 'react-use';

import { useAudio } from 'react-use';

import { useAuthState } from 'react-firebase-hooks/auth';

import { useAxios } from '@use-hooks/axios';

import { useAxiosRequest } from 'use-axios-request';

import { useBattery } from 'react-use';

import { useBoolean } from 'react-hanger';

import { useBoolean } from 'react-hookedup';

import { useBooleanKnob } from 'retoggle';

import useBoundingclientrect from '@rooks/use-boundingclientrect';

import useBrowserContextCommunication from 'react-window-communication-hook';

import useBrowserHistory from 'use-browser-history'

import { useCache } from 'rest-hooks';

import { useCall } from 'use-call'

import { useCallback } from 'react';

import useCallbag from 'use-callbag';

import { useCallbag } from 'react-use';

import { useChain } from 'react-spring';

import { useClickAway } from 'react-use';

import { useClickOutside } from 'use-events';

import useClipboard from 'react-use-clipboard';

import useClippy from 'use-clippy';

import { useCollection } from 'react-firebase-hooks/firestore';

import { useColorKnob } from 'retoggle';

import useComlink from 'react-use-comlink';

import useComponentSize from '@rehooks/component-size';

import { useContext } from 'react';

import useContextMenu from 'react-use-context-menu';

import { useContextReducer } from 'constate';

import { useContextState } from 'constate';

import { useAsync } from 'react-recipes';

import { useCopyClipboard } from 'react-recipes';

import { useCounter } from 'react-hooks-lib'

import useCounter from '@rooks/use-counter';

import { useCounter } from 'react-use';

import { useCounter } from 'react-hookedup';

import { useCss } from 'react-use';

import { useCurrentRoute } from 'react-navi';

import useDOMState from '@yeskunall/react-dom-status-hook';

import { useDarkMode } from 'react-recipes';

import useDarkMode from 'use-dark-mode';

import { useDataLoader } from 'react-use-data-loader'

import { useDebounce } from 'react-recipes';

import { useDebounce } from 'react-use';

import { useDebounce } from 'use-debounce

import useDetectPrint from 'use-detect-print'

import useDeviceMotion from 'the-platform';

import useDeviceOrientation from 'the-platform';

import { useDidMount } from 'react-hooks-lib'

import useDidMount from '@rooks/use-did-mount';

import { useDidMount } from '@withvoid/melting-pot';

import { useDidUpdate } from 'react-hooks-lib'

import useDidUpdate from '@rooks/use-did-update';

import useDimensions from 'use-dimensions';

import { useDimensions } from 'react-recipes';

import { useDispatch } from 'redux-react-hook';

import { useDocument } from 'react-firebase-hooks/firestore';

import useDocumentTitle from '@rehooks/document-title';

import useDocumentVisibility from '@rehooks/document-visibility';

import useDomLocation from 'dom-location';

import { useDownloadUrl } from 'react-firebase-hooks/storage';

import { useDrop } from 'react-use';

import { useDropArea } from 'react-use';

import { useEffect } from 'react';

import { useEffectOnce } from 'react-use';

import useEnhancedReducer from '@rest-hooks/use-enhanced-reducer';

import useEnhancedReducer from 'use-enhanced-reducer';

import useEnhancedReducer from 'react-enhanced-reducer-hook'

import { useErrorBoundary } from 'use-error-boundary'

import { useEventCallback } from 'rxjs-hooks'

import { useEventListener } from 'react-recipes';

import useEventListener from '@use-it/event-listener';

import { useFavicon } from 'react-use';

import useFetch from 'fetch-suspense';

import useFetch, { usePost, usePut, usePatch } from 'use-http';

import { useFetch } from 'react-hooks-lib'

import { useFetch } from '@bjornagh/use-fetch';

import { useFetch } from 'react-fetch-hook';

import { useFetcher } from 'rest-hooks';

import { useFetcher } from 'use-fetcher';

import { useField } from 'react-hooks-lib'

import { useFile } from '@caasi/hooks';

import useFileInput from 'use-file-input';

import { useFocus } from 'react-hooks-lib'

import { useFocus } from 'use-events';

import { useFocus } from 'react-hookedup';

import useForceUpdate from 'use-force-update';

import { useForm } from 'react-hubspot';

import useForm from 'react-hook-form';

import { useForm } from 'react-hooks-helper';

import { useFormField } from '@withvoid/melting-pot';

import { useFormState } from 'react-use-form-state';

import useFormless from 'react-useformless';

import { useEventListener } from 'react-recipes';

import { useFullscreen } from 'react-use';

import useGeoPosition from 'the-platform';

import { useGeolocation } from 'react-recipes';

import { useGeolocation } from 'react-use';

import { useGetSet } from 'react-use';

import { useGetSetState } from 'react-use';

import { useGlobal } from 'reactn';

import { setupClient } from 'use-graphql-request'

import useHeroku from 'react-use-heroku';

import { useHistory } from 'react-navi';

import useHotkeys from 'react-hotkeys-hook'

import { useHover } from 'react-hooks-lib'

import { useHover } from 'react-recipes';

import { useHover } from 'use-events';

import { useHover } from 'react-use';

import { useHover } from '@withvoid/melting-pot';

import { useHover } from 'react-hookedup';

import { useHoverDirty } from 'react-use';

import { useIdb } from 'react-use-idb'

import { useIdle } from 'react-use';

import { useImageData } from '@caasi/hooks';

import { useImageFile } from '@caasi/hooks';

import useImageSize from '@use-hooks/image-size';

import { useImmer } from 'use-immer';

import { useImmerReducer } from 'use-immer';

import { useImmerState } from 'react-immer-hooks'

import { useImperativeMethods } from 'react';

import useInView from 'use-in-view';

import { useInView } from 'react-intersection-observer'

import useInput from '@rooks/use-input';

import { useInput } from 'react-hanger';

import { useInput } from 'react-hookedup';

import useInputValue from '@rehooks/input-value';

import useIntercom from 'use-intercom-hook';

import useIntersectionVisible from 'react-intersection-visible-hook';

import { useInterval } from 'react-recipes';

import { useInterval } from 'react-pirate'

import useInterval from '@use-it/interval';

import useInterval from '@rooks/use-interval';

import { useInterval } from 'react-powerhooks';

import useInterval from '@use-hooks/interval';

import { useInterval } from '@withvoid/melting-pot';

import { useInterval } from 'react-hookedup';

import { useInvalidator } from 'rest-hooks';

import { useIsClient } from 'react-recipes';

import useIsMounted from 'react-is-mounted-hook';

import useKey from 'use-key-hook';

import useKey from '@rooks/use-key';

import { useKey } from 'react-use';

import { useKeyPress } from 'react-recipes';

import { useKeyPress } from 'react-use';

import { useKeyPress } from '@withvoid/melting-pot';

import { useKeyPressEvent } from 'react-use';

import { useKeyboardJs } from 'react-use';

import { useLayout } from 'react-hook-layout';

import { useLayoutEffect } from 'react';

import { useLeafletBounds } from 'use-leaflet';

import { useLeafletCenter } from 'use-leaflet';

import { useLeafletIsMoving } from 'use-leaflet';

import { useLeafletIsZooming } from 'use-leaflet';

import { useLeafletMap } from 'use-leaflet';

import { useLeafletZoom } from 'use-leaflet';

import { useLegacyUnmount } from 'react-pirate'

import { useLegacyUpdate } from 'react-pirate'

import { useLifecycleHooks } from 'react-hanger';

import { useLifecycleHooks } from 'react-hookedup';

import { useList } from 'react-hooks-lib'

import { useList } from 'react-firebase-hooks/database';

import { useList } from 'react-use';

import { useListKeys } from 'react-firebase-hooks/database';

import { useListVals } from 'react-firebase-hooks/database';

import { useLoadingRoute } from 'react-navi';

import { useLocalStorage } from 'react-recipes';

import useLocalStorage from '@rehooks/local-storage';

import { useLocalStorage } from 'react-use';

import useLocalstorage from '@rooks/use-localstorage';

import { useLocation } from 'react-use';

import { useLockBodyScroll } from 'react-recipes';

import { useLockBodyScroll } from 'react-use';

import { useLog } from 'retoggle';

import { useLogger } from 'react-use';

import { useMap } from 'react-hooks-lib'

import { useMap } from 'react-powerhooks';

import { useMap } from 'react-use';

import { useMappedState } from 'redux-react-hook';

import { useMeasure } from "@softbind/hook-use-measure";

import { useMedia } from 'react-recipes';

import useMedia from 'the-platform';

import { useMedia } from 'react-use';

import { useMediaDevices } from 'react-use';

import { useMediaPredicate } from 'react-media-hook';

import { useMemento } from 'react-memento'

import { useMemo } from 'react';

import { useMergeState } from 'react-hooks-lib'

import { useMergeState } from 'react-hookedup';

import { useMermaid } from './useMermaid';

import useMetaTags from 'react-metatags-hook';

import useMethods from 'use-methods';

import useMiddleware from 'react-usemiddleware';

import useMobileDetect from 'use-mobile-detect-hook

import { useModal, ModalProvider } from 'use-modal-hook';

import useModal from 'react-hooks-use-modal';

import { useMotion } from 'react-use';

import { useMotor } from 'react-motor';

import { useMount } from 'react-pirate'

import { useMount } from 'react-use';

import useMouse from '@rooks/use-mouse';

import { useMouse } from 'react-use';

import useMouseAction from 'use-mouse-action';

import { useMouseDown } from 'use-mouse-action';

import { useMouseHovered } from 'react-use';

import { useMousePosition } from 'use-events';

import { useMouseUp } from 'use-mouse-action';

import useMousetrap from 'react-hook-mousetrap'

import { useMultiKeyPress } from 'react-recipes';

import { useMutation } from 'urql';

import { useMutationEffect } from 'react';

import useMutationObserver from '@rooks/use-mutation-observer';

import useNavigatorLanguage from '@rooks/use-navigator-language';

import { useNetwork } from 'react-use';

import useNetworkStatus from 'the-platform';

import useNetworkStatus from '@rehooks/network-status';

import useNotification from '@21kb/react-notification-hook';

import { useNotification } from 'react-recipes';

import { useNumber } from 'react-hanger';

import { useNumberKnob } from 'retoggle';

import { useObject } from 'react-firebase-hooks/database';

import { useObjectKnob } from 'retoggle';

import { useObjectState } from 'use-object-state'

import { useObjectURL } from '@caasi/hooks';

import { useObjectVal } from 'react-firebase-hooks/database';

import { useObservable } from 'rxjs-hooks'

import { useObservable } from 'mobx-react-lite

import { useObservable } from 'react-use';

import { useOfflineStatus } from '@21kb/react-online-status-hook';

import useOnClickOutside from 'use-onclickoutside';

import { useOnClickOutside } from 'react-recipes';

import { useOnLineStatus } from 'react-hookedup';

import { useOnMount } from 'react-hanger';

import { useOnMount } from 'react-hookedup';

import { useOnUnmount } from 'react-hanger';

import { useOnUnmount } from 'react-hookedup';

import useOnline from '@rooks/use-online';

import { useOnlineStatus } from '@21kb/react-online-status-hook';

import { useOnlineStatus } from 'react-hooks-lib'

import { useOnlineStatus } from 'react-recipes';

import useOnlineStatus from '@rehooks/online-status';

import { useOnlineStatus } from '@withvoid/melting-pot';

import useOrientation from '@21kb/react-device-orientation-hook';

import { useOrientation } from 'react-use';

import useOutsideClick from '@rooks/use-outside-click';

import { useOutsideClick } from 'react-use';

import { usePageLeave } from 'react-use';

import usePanZoom from 'use-pan-and-zoom';

import createPersistedReducer from 'use-persisted-reducer';

import createPersistedState from 'use-persisted-state';

import usePortal from 'react-useportal';

import usePosition from '@rehooks/usePosition';

import usePrevious from 'use-previous';

import { usePrevious } from 'react-recipes';

import { usePrevious } from 'react-pirate'

import usePrevious from '@rooks/use-previous';

import { usePrevious } from 'react-hanger';

import { usePrevious } from 'react-hookedup';

import useProfunctorState from '@staltz/use-profunctor-state';

import { usePromise } from 'promise-hook';

import { usePromise } from 'use-promise'

import { usePromise } from 'react-hook-utils'

import { usePromise } from 'react-use';

import useQrCode from 'react-qrcode-hook';

import useQrcode from 'react-use-qrcode';

import { useQuery } from 'urql';

import { useQueryState } from 'use-location-state';

import useRaf from '@rooks/use-raf';

import { useRaf } from 'react-use';

import { useRangeKnob } from 'retoggle';

import { useRangesKnob } from 'retoggle';

import useReactRouter from 'use-react-router';

import useRecaptcha, { Badge } from 'react-recaptcha-hook';

import { useReducer } from 'react';

import { useRedux } from 'use-redux';

import { useReduxDispatch } from 'react-hooks-easy-redux';

import { useReduxState } from 'react-hooks-easy-redux';

import { useRef } from 'react';

import { useRefMounted } from 'react-use';

import useRefScroller from 'use-ref-scroller';

import {useRequest} from 'react-request-hook';

import { useResetter } from 'rest-hooks';

import { useResource } from 'rest-hooks';

import {useResource} from 'react-request-hook';

import { useRetrieve } from 'rest-hooks';

import {useRoutes} from 'hookrouter';

import { useSFControl } from 'react-form-stateful';

import { useSFError } from 'react-form-stateful';

import { useSFValue } from 'react-form-stateful';

import useSSR from 'use-ssr'

import { useScreenDimensions } from 'use-dimensions';

import useScreenType from 'react-hooks-screen-type';

import { useScreenType } from '@withvoid/melting-pot';

import { useScript } from 'react-recipes';

import useScript from 'react-script-hook';

import useScript from 'the-platform';

import { useScroll } from 'react-use';

import { useScrollData } from 'scroll-data-hook';

import useScrollPosition from 'use-scroll-position';

import { useScrollPosition } from 'react-use-scroll-position';

import useScrollSpy from 'react-use-scrollspy'

import { useScrollXPosition } from 'react-use-scroll-position';

import { useScrollYPosition } from 'react-use-scroll-position';

import useSelect from '@rooks/use-select';

import { useSelectKnob } from 'retoggle';

import useSelectors from '@qest/use-selectors';

import useSessionStorage from '@rooks/use-sessionstorage';

import { useSessionStorage } from 'react-use';

import { useSetState } from 'react-hanger';

import { useSetState } from 'react-use';

import useSimpleUndo from 'use-simple-undo';

import { useSize } from 'react-hook-size';

import { useSize } from 'react-use';

import useSocket from 'use-socket.io-client';

import { ClientSocket, useSocket } from 'use-socketio';

import { useSpeech } from 'react-use';

import { useSpeechRecognition } from 'react-recipes';

import { useSpeechSynthesis } from 'react-recipes';

import { useSpring } from 'react-spring';

import { useSpring } from 'react-use';

import { useSprings } from 'react-spring';

import { useSt8 } from 'use-st8';

import { useState } from 'react';

import useStateSnapshots from 'use-state-snapshots';

import { useStateTree } from 'react-state-tree';

import { useStateValidator } from 'react-indicative-hooks';

import { useStateful } from 'react-hanger';

import { useStep } from 'react-hooks-helper';

import {useStore} from 'reto';

import { useStore } from 'easy-peasy';

import { useStore } from 'redhooks';

import { useStore } from 'reaktion';

import useStylesheet from 'the-platform';

import { useSubscription } from 'urql';

import { useSubscription } from 'rest-hooks';

import { SubstateProvider, useSubstate } from 'use-substate';

import { useSwipeable } from 'react-swipeable';

import useSyncScroll from 'react-use-sync-scroll';

import {Provider, useT} from 'use-t';

import { useTextKnob } from 'retoggle';

import { useThrottle } from 'react-recipes';

import { useThrottle } from 'react-use';

import { useThrottleFn } from 'react-use';

import useTimeAgo from '@rooks/use-time-ago';

import { useTimemachine } from 'retoggle';

import { useTimeout } from 'react-pirate'

import useTimeout from '@rooks/use-timeout';

import { useTimeout } from 'react-use';

import { useTimeout } from 'react-hookedup';

import useTimer  from 'react-timer-hook'

import { useTimer } from '@awgv/use-timer-hook'

import { useTimer } from 'use-timer'

import { useTitle } from 'react-use';

import { useTitle } from '@withvoid/melting-pot';

import { useToggle } from 'react-hooks-lib'

import { useToggle } from 'react-pirate'

import useToggle from '@rooks/use-toggle';

import { useToggle } from 'react-powerhooks';

import { useToggle } from 'react-use';

import { useToggle } from '@withvoid/melting-pot';

import { useTopState } from 'top-state-hook';

import { useTouch } from 'react-hooks-lib'

import { useTouch } from 'use-events';

import { useTouch } from '@withvoid/melting-pot';

import useTrackingIsLoaded from 'tracking-ready-hook';

import { useTrail } from 'react-spring';

import { useTransition } from 'react-spring';

import { useTween } from 'react-use';

import { useURLState } from '@operational/components';

import useUndo from 'use-undo';

import { useUnmount } from 'react-pirate'

import { useUnmount } from 'react-use';

import { useUpdate } from 'react-pirate'

import { useUpdate } from 'react-use';

import { useUpdate } from '@withvoid/melting-pot';

import { useUpdateEffect } from 'react-use';

import { useValidate } from 'react-indicative-hooks';

import { useValidateAll } from 'react-indicative-hooks';

import useVibration from '@21kb/react-vibration-hook';

import { useVideo } from 'react-use';

import useVideoMeta from '@use-hooks/video-meta';

import useVisibilitySensor from '@rooks/use-visibility-sensor';

import useVisible from '@21kb/react-page-visible-hook';

import { Waiter, useWait } from 'react-wait'

import { useWait } from 'react-use';

import useWebShare from 'react-use-web-share';

import { useWhyDidYouUpdate } from 'react-recipes';

import { useWillUnmount } from 'react-hooks-lib'

import useWillUnmount from '@rooks/use-will-unmount';

import { useWindowDimensions } from 'use-dimensions';

import { useWindowScroll } from 'react-recipes';

import { useWindowScroll } from 'react-use';

import useWindowScrollPosition from 'the-platform';

import useWindowScrollPosition from '@rehooks/window-scroll-position';

import { useWindowScrollPosition } from '@withvoid/melting-pot';

import { useWindowSize } from '@operational/components';

import { useWindowSize } from 'react-recipes';

import useWindowSize from '@rooks/use-window-size';

import useWindowSize from 'the-platform';

import useWindowSize from '@rehooks/window-size';

import { useWindowSize } from 'react-use';

import { useWindowSize } from '@withvoid/melting-pot';

import { useWorker } from 'react-recipes';

import useWorker from '@rooks/use-worker';

import { useWorker } from '@koale/useworker'

import { createContextState } from 'react-hooks-lib'

import { createGlobalState } from 'react-hooks-lib'

import { createGlobalState } from 'react-hooks-global-state';

import { createMemo } from 'react-use';

import createPersistedState from 'use-persisted-state'

import { createSelector } from 'react-selector-hooks';

import { createStateSelector } from 'react-selector-hooks';

import { createStructuredSelector } from 'react-selector-hooks';

import { createSynced } from 'resynced'

import { createSyncedRedux } from 'resynced'

import { globalReducer } from 'react-hook-utils'

import 'react-universal-hooks';

import reactDomStatusHook from '@21kb/react-dom-status-hook';

import reactWindowFocusHook from '@21kb/react-window-focus-hook';