React snippets
React components such as accordions, modals and data tables, and hooks for state, events and browser APIs, each with an example use.
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 for typing props and hooks.
- Automatic text linkingRenders a string as plaintext, with URLs converted to appropriate link elements.
- Button with ripple effectRenders a button that animates a ripple effect when clicked.
- Callable telephone linkRenders a link formatted to call a phone number (tel: link).
- CarouselRenders a carousel component.
- Closable alertRenders an alert component with type prop.
- Collapsible accordionRenders an accordion menu with multiple collapsible content elements.
- Collapsible contentRenders a component with collapsible content.
- Controlled input fieldRenders a controlled <input> element that uses a callback function to inform its parent about value updates.
- Countdown timerRenders a countdown timer that prints a message when it reaches zero.
- Data listRenders a list of elements from an array of primitives.
- Data tableRenders a table with rows dynamically created from an array of primitives.
- Email linkRenders a link formatted to send an email (mailto: link).
- Expandable object tree viewRenders a tree view of a JSON object or array with collapsible content.
- File drag and drop areaRenders a file drag and drop component for a single file.
- Modal dialogRenders a Modal component, controllable through events.
- Object table viewRenders a table with rows dynamically created from an array of objects and a list of property names.
- React useAsync hookHandles asynchronous calls.
- React useBodyScrollLock hookEnables body scroll locking.
- React useClickInside hookHandles the event of clicking inside the wrapped component.
- React useClickOutside hookHandles the event of clicking outside of the wrapped component.
- React useComponentDidMount hookExecutes a callback immediately after a component is mounted.
- React useComponentDidUpdate hookExecutes a callback immediately after a component is updated.
- React useComponentWillUnmount hookExecutes a callback immediately before a component is unmounted and destroyed.
- React useCopyToClipboard hookCopies the given text to the clipboard.
- React useDebounce hookDebounces the given value.
- React useDefault hookCreates a stateful value with a default fallback if it’s null or undefined, and a function to update it.
- React useDelayedState hookDelays creating a stateful value until some condition is met.
- React useEffectOnce hookRuns a callback at most once when a condition becomes true.
- React useError hookCreates an error dispatcher.
- React useEventListener hookAdds an event listener for the specified event type on the given element.
- React useFetch hookImplements fetch() in a declarative manner.
- React useForm hookCreates a stateful value from the fields in a form.
- React useGetSet hookCreates a stateful value, returning a getter and a setter function.
- React useHash hookTracks the browser’s location hash value, and allows changing it.
- React useHover hookHandles the event of hovering over the wrapped component.
- React useIntersectionObserver hookObserves visibility changes for a given element.
- React useInterval hookImplements setInterval() in a declarative manner.
- React useIsomporphicEffect hookEesolves to useEffect() on the server and useLayoutEffect() on the client.
- React useKeyPress hookListens for changes in the pressed state of a given key.
- React useLocalStorage hookCreates a stateful value that is persisted to localStorage, and a function to update it.
- React useMap hookCreates a stateful Map object, and a set of functions to manipulate it.
- React useMediaQuery hookChecks if the current environment matches a given media query and returns the appropriate value.
- React useMergeState hookCreates a stateful value, and a function to update it by merging the new state provided.
- React useMutationObserver hookWatches for changes made to the DOM tree, using a MutationObserver
- React useNavigatorOnLine hookChecks if the client is online or offline.
- React useOnGlobalEvent hookExecutes a callback whenever an event occurs on the global object.
- React useOnWindowResize hookExecutes a callback whenever the window is resized.
- React useOnWindowScroll hookExecutes a callback whenever the window is scrolled.
- React usePersistedState hookReturns a stateful value, persisted in localStorage, and a function to update it.
- React usePortal hookCreates a portal, allowing rendering of children outside the parent component.
- React usePrevious hookStores the previous state or props.
- React useRequestAnimationFrame hookRuns an animating function, calling it before every repaint.
- React useScript hookDynamically loads an external script.
- React useSearchParam hookTracks the browser’s location search param.
- React useSessionStorage hookCreates a stateful value that is persisted to sessionStorage, and a function to update it.
- React useSet hookCreates a stateful Set object, and a set of functions to manipulate it.
- React useSSR hookChecks if the code is running on the browser or the server.
- React useTimeout hookImplements setTimeout() in a declarative manner.
- React useTitle hookSets the title of the page
- React useToggler hookProvides a boolean state variable that can be toggled between its two states.
- React useUnload hookHandles the beforeunload window event.
- React useUpdate hookForces the component to re-render when called.
- React useWindowSize hookTracks the dimensions of the browser window.
- Show/hide password toggleRenders a password input field with a reveal button.
- Spinning loaderRenders a spinning loader component.
- Star ratingRenders a star rating component.
- Stateful checkbox with multiple selectionRenders a checkbox list that uses a callback function to pass its selected value/values to the parent component.
- TabsRenders a tabbed menu and view component.
- Tag input fieldRenders a tag input field.
- Textarea with character limitRenders a textarea component with a character limit.
- Textarea with word limitRenders a textarea component with a word limit.
- ToggleRenders a toggle component.
- TooltipRenders a tooltip component.
- Uncontrolled input fieldRenders an uncontrolled <input> element that uses a callback function to inform its parent about value updates.
- Uncontrolled range inputRenders an uncontrolled range input element that uses a callback function to pass its value to the parent component.
- Uncontrolled select elementRenders an uncontrolled <select> element that uses a callback function to pass its value to the parent component.
- Uncontrolled textarea elementRenders an uncontrolled <textarea> element that uses a callback function to pass its value to the parent component.
No snippet matches that filter.