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
Introduction
React Use delivers production-ready hooks that solve real-world problems. Built with TypeScript-first approach, SSR compatibility, and tree-shaking optimization - everything you need to build modern React applications. Improve your react applications with our library 📦 designed for comfort and speed.
Getting Started
npm install @siberiacancode/reactuseAfter installation, you can use any of our hooks in your components:
import { useCounter } from '@siberiacancode/reactuse';
const App = () => {
const counter = useCounter(0);
return (
<div>
<h1>Count: {counter.value}</h1>
<button onClick={() => counter.inc()}>+1</button>
<button onClick={() => counter.dec()}>-1</button>
</div>
);
};CLI Installation
Use the CLI to add hooks to your project with useverse.
npx useverse@latest initnpx useverse@latest add [hook]You will be presented with a list of hooks to choose from:
Which hooks would you like to add? › Space to select. A to toggle all.
Enter to submit.
â—¯ useActiveElement
â—¯ useAsync
â—¯ useBattery
â—¯ useBluetooth
â—¯ useBoolean
â—¯ useBreakpoints
â—¯ useBrowserLanguage
â—¯ useClickOutside
â—¯ useClipboard
â—¯ useConst