elements
lifecycle
browser
- useAudio
- useBattery
- useBluetooth
- useBreakpoints
- useBroadcastChannel
- useBrowserLocation
- useClipboard
- useCopy
- useCssVar
- useDisplayMedia
- useDocumentEvent
- useDocumentTitle
- useDocumentVisibility
- useEventListener
- useEventSource
- useEyeDropper
- useFavicon
- useFileSystemAccess
- useFps
- useFullscreen
- useGamepad
- useGeolocation
- useMeasure
- useMediaControls
- useMediaQuery
- useMemory
- useNetwork
- useObjectUrl
- useOnline
- useOtpCredential
- usePermission
- usePictureInPicture
- usePointerLock
- usePostMessage
- useRaf
- useShare
- useSpeechRecognition
- useSpeechSynthesis
- useSticky
- useVibrate
- useVirtualKeyboard
- useWakeLock
- useWebSocket
utilities
state
- useBoolean
- useControllableState
- useCookie
- useCookies
- useCounter
- useDefault
- useDisclosure
- useField
- useHash
- useList
- useLocalStorage
- useMap
- useMask
- useMergedRef
- useObject
- useOffsetPagination
- useQueue
- useRafState
- useRefState
- useSessionStorage
- useSet
- useStateHistory
- useStep
- useStorage
- useToggle
- useUrlSearchParam
- useUrlSearchParams
- useWizard
user
sensors
- useDeviceMotion
- useDeviceOrientation
- useHotkeys
- useIdle
- useInfiniteScroll
- useIntersectionObserver
- useKeyboard
- useKeyPress
- useKeysPressed
- useMouse
- useMutationObserver
- useOrientation
- usePageLeave
- useParallax
- usePerformanceObserver
- useResizeObserver
- useScroll
- useScrollIntoView
- useScrollTo
- useSwipe
- useTextSelection
- useVisibility
- useWindowEvent
- useWindowFocus
- useWindowScroll
- useWindowSize
Manual Installation
Add reactuse to your project without relying on a framework-specific guide.
Install the package
npm install @siberiacancode/reactuseConfigure path aliases
Add baseUrl and paths to your tsconfig.json (or jsconfig.json) so imports resolve correctly:
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
}
}Adjust the @/* path to match your project structure (e.g. "./*" if you have no src folder).
Run the CLI
Run the useverse init command to setup your project:
npx useverse@latest initThis will create a configuration file reactuse.json in your project and configure where hooks are generated (e.g. @/shared/hooks).
Add hooks
Add hooks to your project with the CLI:
npx useverse@latest add useBooleanThen import and use them:
import { useBoolean } from '@/shared/hooks';
const App = () => {
const [on, toggle] = useBoolean();
return (
<div>
<button type='button' onClick={() => toggle()}>
Toggle
</button>
<p>{on.toString()}</p>
</div>
);
};If you prefer not to use the CLI, you can import hooks directly from the package:
import { useBoolean } from '@siberiacancode/reactuse';