React Hokss[]
⚡ Powerful and useful hooks
React Hokss
// The ultimate collection of modern React hooks for building exceptional user experiences
~/your-awesome-project
$npm install @usegrand/react-hokss
Ready
import { useUndoRedo, useCopyToClipboard } from '@usegrand/react-hokss'
const [state, { undo, redo }] = useUndoRedo(initialValue)
const [copy, { copied }] = useCopyToClipboard()
//🚀 Zero configuration, TypeScript ready, production tested
features.json
Key Features
Lightweight & Fast
Zero dependencies, optimized for performance
TypeScript Ready
Full type safety and excellent developer experience
Modern & Practical
Modern Web APIs for real-world development needs
Available Hooks
Explore our carefully crafted hooks designed to solve common React development challenges
useUndoRedo.tsx
useUndoRedo
STATE_MGMT// Manage undo/redo state for any data structure
const [state, { undo, redo }] = useUndoRedo(initialState);Time TravelHistory ManagementUndo/Redo
useCopyToClipboard.tsx
useCopyToClipboard
UTILITY// Simplifies copying text/content directly to clipboard
const { copy, copied, history } = useCopyToClipboard({ trackHistory: true });Clipboard APIHistory TrackingFallback SupportError Handling
usePreferredColorScheme.tsx
usePreferredColorScheme
THEME// Detect user's OS/browser color preference (dark/light mode)
const { colorScheme, toggleColorScheme } = usePreferredColorScheme({ autoApply: true });OS DetectionAuto ApplyTheme ToggleMedia Query
useTextSelection.tsx
useTextSelection
INTERACTION// Detect and return currently selected text by user
const { text, isSelected, clearSelection } = useTextSelection();Selection DetectionRange InformationBounding RectProgrammatic Control
useFavicon.tsx
useFavicon
UI// Dynamically change page favicon based on state
const { setFavicon, setFaviconByStatus } = useFavicon();Dynamic FaviconStatus IndicatorsNotification BadgesOriginal Restore
useDocumentTitle.tsx
useDocumentTitle
UI// Easily update page title dynamically
const { setTitle, restoreTitle } = useDocumentTitle('My App');Dynamic TitleTemplate SupportPrefix/SuffixAuto Restore
useScrollPosition.tsx
useScrollPosition
INTERACTION// Track current scroll position and direction
const { position, direction, isScrolling, scrollToTop } = useScrollPosition();Position TrackingDirection DetectionScroll ControlPercentage Calculation
usePageLeave.tsx
usePageLeave
INTERACTION// Detect when the user's cursor leaves the page (exit-intent)
const { hasLeft, triggerPageLeave } = usePageLeave({ onPageLeave: showModal });Exit IntentMouse Leave DetectionVisibility TrackingConfigurable Sensitivity
useDetectCapsLock.tsx
useDetectCapsLock
INPUT// Detect if Caps Lock is enabled during input
const { isCapsLockEnabled, isSupported } = useDetectCapsLock();Caps Lock DetectionKeyboard EventsBrowser Support CheckReal-time Updates
useTristate.tsx
useTristate
STATE_MGMT// Manage a 3-valued state (true | false | indeterminate) with cycling helpers
const { value, setTrue, setFalse, setIndeterminate, cycle } = useTristate(false);3-Value StateCycling HelpersExplicit SettersHierarchical Selection
useScreenBlur.tsx
useScreenBlur
UI// Instantly blurs the entire screen or selected areas for sensitive information protection
const { isBlurred, blur, unblur, toggle } = useScreenBlur();Screen BlurElement BlurBackdrop FilterSensitive Data Protection
useFileSystemAccess.tsx
useFileSystemAccess
UTILITY// Open/save real files with the File System Access API; returns readFile, writeFile, and live permission state
const { readFile, writeFile, saveFile, hasPermission } = useFileSystemAccess();File System APIPermission ManagementRead/Write FilesBrowser Support
useEyeDropper.tsx
useEyeDropper
UTILITY// Color picker from screen elements using EyeDropper API
const { isSupported, isOpen, color, error, open } = useEyeDropper();EyeDropper APIColor SelectionBrowser SupportError Handling