# React snippets

> React components such as accordions, modals and data tables, and hooks for state, events and browser APIs, each with an example use.

Canonical: https://www.wiki.jodisand.me/snippets/react/
Reviewed: 2026-09-24
Related: [TypeScript](https://www.wiki.jodisand.me/typescript/index.md), [Testing](https://www.wiki.jodisand.me/testing/index.md)


Short third-party examples written in plain JavaScript (no TypeScript). They skip prop validation, error boundaries, accessibility review and tests. Treat them as sketches: add types, keyboard and screen-reader support, and tests before shipping. See [TypeScript](https://www.wiki.jodisand.me/typescript/) for typing props and hooks.


## Pages

- [Automatic text linking](https://www.wiki.jodisand.me/snippets/react/autolink/index.md): Renders a string as plaintext, with URLs converted to appropriate link elements.
- [Button with ripple effect](https://www.wiki.jodisand.me/snippets/react/ripplebutton/index.md): Renders a button that animates a ripple effect when clicked.
- [Callable telephone link](https://www.wiki.jodisand.me/snippets/react/callto/index.md): Renders a link formatted to call a phone number (tel: link).
- [Carousel](https://www.wiki.jodisand.me/snippets/react/carousel/index.md): Renders a carousel component.
- [Closable alert](https://www.wiki.jodisand.me/snippets/react/alert/index.md): Renders an alert component with type prop.
- [Collapsible accordion](https://www.wiki.jodisand.me/snippets/react/accordion/index.md): Renders an accordion menu with multiple collapsible content elements.
- [Collapsible content](https://www.wiki.jodisand.me/snippets/react/collapse/index.md): Renders a component with collapsible content.
- [Controlled input field](https://www.wiki.jodisand.me/snippets/react/controlledinput/index.md): Renders a controlled <input> element that uses a callback function to inform its parent about value updates.
- [Countdown timer](https://www.wiki.jodisand.me/snippets/react/countdown/index.md): Renders a countdown timer that prints a message when it reaches zero.
- [Data list](https://www.wiki.jodisand.me/snippets/react/datalist/index.md): Renders a list of elements from an array of primitives.
- [Data table](https://www.wiki.jodisand.me/snippets/react/datatable/index.md): Renders a table with rows dynamically created from an array of primitives.
- [Email link](https://www.wiki.jodisand.me/snippets/react/mailto/index.md): Renders a link formatted to send an email (mailto: link).
- [Expandable object tree view](https://www.wiki.jodisand.me/snippets/react/treeview/index.md): Renders a tree view of a JSON object or array with collapsible content.
- [File drag and drop area](https://www.wiki.jodisand.me/snippets/react/filedrop/index.md): Renders a file drag and drop component for a single file.
- [Modal dialog](https://www.wiki.jodisand.me/snippets/react/modal/index.md): Renders a Modal component, controllable through events.
- [Object table view](https://www.wiki.jodisand.me/snippets/react/mappedtable/index.md): Renders a table with rows dynamically created from an array of objects and a list of property names.
- [React useAsync hook](https://www.wiki.jodisand.me/snippets/react/useasync/index.md): Handles asynchronous calls.
- [React useBodyScrollLock hook](https://www.wiki.jodisand.me/snippets/react/usebodyscrolllock/index.md): Enables body scroll locking.
- [React useClickInside hook](https://www.wiki.jodisand.me/snippets/react/useclickinside/index.md): Handles the event of clicking inside the wrapped component.
- [React useClickOutside hook](https://www.wiki.jodisand.me/snippets/react/useclickoutside/index.md): Handles the event of clicking outside of the wrapped component.
- [React useComponentDidMount hook](https://www.wiki.jodisand.me/snippets/react/usecomponentdidmount/index.md): Executes a callback immediately after a component is mounted.
- [React useComponentDidUpdate hook](https://www.wiki.jodisand.me/snippets/react/usecomponentdidupdate/index.md): Executes a callback immediately after a component is updated.
- [React useComponentWillUnmount hook](https://www.wiki.jodisand.me/snippets/react/usecomponentwillunmount/index.md): Executes a callback immediately before a component is unmounted and destroyed.
- [React useCopyToClipboard hook](https://www.wiki.jodisand.me/snippets/react/usecopytoclipboard/index.md): Copies the given text to the clipboard.
- [React useDebounce hook](https://www.wiki.jodisand.me/snippets/react/usedebounce/index.md): Debounces the given value.
- [React useDefault hook](https://www.wiki.jodisand.me/snippets/react/usedefault/index.md): Creates a stateful value with a default fallback if it’s null or undefined, and a function to update it.
- [React useDelayedState hook](https://www.wiki.jodisand.me/snippets/react/usedelayedstate/index.md): Delays creating a stateful value until some condition is met.
- [React useEffectOnce hook](https://www.wiki.jodisand.me/snippets/react/useeffectonce/index.md): Runs a callback at most once when a condition becomes true.
- [React useError hook](https://www.wiki.jodisand.me/snippets/react/useerror/index.md): Creates an error dispatcher.
- [React useEventListener hook](https://www.wiki.jodisand.me/snippets/react/useeventlistener/index.md): Adds an event listener for the specified event type on the given element.
- [React useFetch hook](https://www.wiki.jodisand.me/snippets/react/usefetch/index.md): Implements fetch() in a declarative manner.
- [React useForm hook](https://www.wiki.jodisand.me/snippets/react/useform/index.md): Creates a stateful value from the fields in a form.
- [React useGetSet hook](https://www.wiki.jodisand.me/snippets/react/usegetset/index.md): Creates a stateful value, returning a getter and a setter function.
- [React useHash hook](https://www.wiki.jodisand.me/snippets/react/usehash/index.md): Tracks the browser’s location hash value, and allows changing it.
- [React useHover hook](https://www.wiki.jodisand.me/snippets/react/usehover/index.md): Handles the event of hovering over the wrapped component.
- [React useIntersectionObserver hook](https://www.wiki.jodisand.me/snippets/react/useintersectionobserver/index.md): Observes visibility changes for a given element.
- [React useInterval hook](https://www.wiki.jodisand.me/snippets/react/useinterval/index.md): Implements setInterval() in a declarative manner.
- [React useIsomporphicEffect hook](https://www.wiki.jodisand.me/snippets/react/useisomporphiceffect/index.md): Eesolves to useEffect() on the server and useLayoutEffect() on the client.
- [React useKeyPress hook](https://www.wiki.jodisand.me/snippets/react/usekeypress/index.md): Listens for changes in the pressed state of a given key.
- [React useLocalStorage hook](https://www.wiki.jodisand.me/snippets/react/uselocalstorage/index.md): Creates a stateful value that is persisted to localStorage, and a function to update it.
- [React useMap hook](https://www.wiki.jodisand.me/snippets/react/usemap/index.md): Creates a stateful Map object, and a set of functions to manipulate it.
- [React useMediaQuery hook](https://www.wiki.jodisand.me/snippets/react/usemediaquery/index.md): Checks if the current environment matches a given media query and returns the appropriate value.
- [React useMergeState hook](https://www.wiki.jodisand.me/snippets/react/usemergestate/index.md): Creates a stateful value, and a function to update it by merging the new state provided.
- [React useMutationObserver hook](https://www.wiki.jodisand.me/snippets/react/usemutationobserver/index.md): Watches for changes made to the DOM tree, using a MutationObserver
- [React useNavigatorOnLine hook](https://www.wiki.jodisand.me/snippets/react/usenavigatoronline/index.md): Checks if the client is online or offline.
- [React useOnGlobalEvent hook](https://www.wiki.jodisand.me/snippets/react/useonglobalevent/index.md): Executes a callback whenever an event occurs on the global object.
- [React useOnWindowResize hook](https://www.wiki.jodisand.me/snippets/react/useonwindowresize/index.md): Executes a callback whenever the window is resized.
- [React useOnWindowScroll hook](https://www.wiki.jodisand.me/snippets/react/useonwindowscroll/index.md): Executes a callback whenever the window is scrolled.
- [React usePersistedState hook](https://www.wiki.jodisand.me/snippets/react/usepersistedstate/index.md): Returns a stateful value, persisted in localStorage, and a function to update it.
- [React usePortal hook](https://www.wiki.jodisand.me/snippets/react/useportal/index.md): Creates a portal, allowing rendering of children outside the parent component.
- [React usePrevious hook](https://www.wiki.jodisand.me/snippets/react/useprevious/index.md): Stores the previous state or props.
- [React useRequestAnimationFrame hook](https://www.wiki.jodisand.me/snippets/react/userequestanimationframe/index.md): Runs an animating function, calling it before every repaint.
- [React useScript hook](https://www.wiki.jodisand.me/snippets/react/usescript/index.md): Dynamically loads an external script.
- [React useSearchParam hook](https://www.wiki.jodisand.me/snippets/react/usesearchparam/index.md): Tracks the browser’s location search param.
- [React useSessionStorage hook](https://www.wiki.jodisand.me/snippets/react/usesessionstorage/index.md): Creates a stateful value that is persisted to sessionStorage, and a function to update it.
- [React useSet hook](https://www.wiki.jodisand.me/snippets/react/useset/index.md): Creates a stateful Set object, and a set of functions to manipulate it.
- [React useSSR hook](https://www.wiki.jodisand.me/snippets/react/usessr/index.md): Checks if the code is running on the browser or the server.
- [React useTimeout hook](https://www.wiki.jodisand.me/snippets/react/usetimeout/index.md): Implements setTimeout() in a declarative manner.
- [React useTitle hook](https://www.wiki.jodisand.me/snippets/react/usetitle/index.md): Sets the title of the page
- [React useToggler hook](https://www.wiki.jodisand.me/snippets/react/usetoggler/index.md): Provides a boolean state variable that can be toggled between its two states.
- [React useUnload hook](https://www.wiki.jodisand.me/snippets/react/useunload/index.md): Handles the beforeunload window event.
- [React useUpdate hook](https://www.wiki.jodisand.me/snippets/react/useupdate/index.md): Forces the component to re-render when called.
- [React useWindowSize hook](https://www.wiki.jodisand.me/snippets/react/usewindowsize/index.md): Tracks the dimensions of the browser window.
- [Show/hide password toggle](https://www.wiki.jodisand.me/snippets/react/passwordrevealer/index.md): Renders a password input field with a reveal button.
- [Spinning loader](https://www.wiki.jodisand.me/snippets/react/loader/index.md): Renders a spinning loader component.
- [Star rating](https://www.wiki.jodisand.me/snippets/react/starrating/index.md): Renders a star rating component.
- [Stateful checkbox with multiple selection](https://www.wiki.jodisand.me/snippets/react/multiselectcheckbox/index.md): Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.
- [Tabs](https://www.wiki.jodisand.me/snippets/react/tabs/index.md): Renders a tabbed menu and view component.
- [Tag input field](https://www.wiki.jodisand.me/snippets/react/taginput/index.md): Renders a tag input field.
- [Textarea with character limit](https://www.wiki.jodisand.me/snippets/react/limitedtextarea/index.md): Renders a textarea component with a character limit.
- [Textarea with word limit](https://www.wiki.jodisand.me/snippets/react/limitedwordtextarea/index.md): Renders a textarea component with a word limit.
- [Toggle](https://www.wiki.jodisand.me/snippets/react/toggle/index.md): Renders a toggle component.
- [Tooltip](https://www.wiki.jodisand.me/snippets/react/tooltip/index.md): Renders a tooltip component.
- [Uncontrolled input field](https://www.wiki.jodisand.me/snippets/react/uncontrolledinput/index.md): Renders an uncontrolled <input> element that uses a callback function to inform its parent about value updates.
- [Uncontrolled range input](https://www.wiki.jodisand.me/snippets/react/slider/index.md): Renders an uncontrolled range input element that uses a callback function to pass its value to the parent component.
- [Uncontrolled select element](https://www.wiki.jodisand.me/snippets/react/select/index.md): Renders an uncontrolled <select> element that uses a callback function to pass its value to the parent component.
- [Uncontrolled textarea element](https://www.wiki.jodisand.me/snippets/react/textarea/index.md): Renders an uncontrolled <textarea> element that uses a callback function to pass its value to the parent component.