React snippets¶
Components and hooks you can drop into any React project.
Components¶
| Snippet | Description |
|---|---|
| Accordion | Collapsible accordion with multiple sections |
| Alert | Dismissible alert component |
| AutoLink | Auto-converts URLs in text to links |
| Callto | Telephone link wrapper |
| Carousel | Image/content carousel |
| Collapse | Togglable collapse section |
| ControlledInput | Controlled text input |
| CountDown | Countdown timer component |
| DataList | List rendering component |
| DataTable | Sortable data table |
| FileDrop | Drag-and-drop file upload zone |
| LimitedTextarea | Textarea with character limit |
| LimitedWordTextarea | Textarea with word limit |
| Loader | Loading spinner |
| Mailto | Email link wrapper |
| MappedTable | Table from object data |
| Modal | Modal dialog |
| MultiselectCheckbox | Multi-select checkbox list |
| PasswordRevealer | Password input with show/hide toggle |
| RippleButton | Button with ripple click effect |
| Select | Select dropdown |
| Slider | Range slider input |
| StarRating | Star rating widget |
| Tabs | Tabbed content panel |
| TagInput | Tag input field |
| TextArea | Controlled textarea |
| Toggle | Toggle switch |
| Tooltip | Tooltip on hover |
| TreeView | Recursive tree view |
| UncontrolledInput | Uncontrolled text input |
Hooks¶
| Hook | Description |
|---|---|
| useAsync | Run async functions with state tracking |
| useBodyScrollLock | Lock body scroll |
| useClickInside | Callback on click inside element |
| useClickOutside | Callback on click outside element |
| useComponentDidMount | Run effect once on mount |
| useComponentDidUpdate | Run effect on update |
| useComponentWillUnmount | Run effect on unmount |
| useCopyToClipboard | Copy text to clipboard |
| useDebounce | Debounce a value |
| useDefault | State with a default fallback |
| useDelayedState | State update with delay |
| useEffectOnce | Run effect exactly once |
| useError | Throw errors from async code |
| useEventListener | Attach event listeners |
| useFetch | Fetch data from a URL |
| useForm | Controlled form state |
| useGetSet | Get/set state without re-render |
| useHash | URL hash state |
| useHover | Detect element hover |
| useIntersectionObserver | IntersectionObserver wrapper |
| useInterval | setInterval wrapper |
| useIsomporphicEffect | SSR-safe useLayoutEffect |
| useKeyPress | Detect key press |
| useLocalStorage | Persist state in localStorage |
| useMap | Map as state |
| useMediaQuery | Match CSS media queries |
| useMergeState | Merge partial state updates |
| useMutationObserver | MutationObserver wrapper |
| useNavigatorOnLine | Online/offline status |
| useOnGlobalEvent | Attach global event listeners |
| useOnWindowResize | Callback on window resize |
| useOnWindowScroll | Callback on window scroll |
| usePersistedState | State persisted across sessions |
| usePortal | Render into a portal |
| usePrevious | Previous value of a state/prop |
| useRequestAnimationFrame | requestAnimationFrame loop |
| useScript | Dynamically load a script |
| useSearchParam | Read URL search params |
| useSessionStorage | State in sessionStorage |
| useSet | Set as state |
| useSSR | Detect server-side rendering |
| useTimeout | setTimeout wrapper |
| useTitle | Set document title |
| useToggler | Boolean toggle state |
| useUnload | Callback on page unload |
| useUpdate | Force re-render |
| useWindowSize | Track window dimensions |