React snippets

• Automatic text linking Renders a string as plaintext, with URLs converted to appropriate link elements. Use String.prototype.split() … componentsfragmentregexp
• Button with ripple effect Renders a button that animates a ripple effect when clicked. Use the useState() hook to create the coords and … componentsstateeffect
• Callable telephone link Renders a link formatted to call a phone number (tel: link). Use phone to create a <a> element with an … components
• Carousel Renders a carousel component. Use the useState() hook to create the active state variable and give it a value … componentschildrenstateeffect
• Closable alert Renders an alert component with type prop. Use the useState() hook to create the isShown and isLeaving state … componentsstateeffect
• Collapsible accordion Renders an accordion menu with multiple collapsible content elements. Define an AccordionItem component, that … componentschildrenstate
• Collapsible content Renders a component with collapsible content. Use the useState() hook to create the isCollapsed state … componentschildrenstate
• Controlled input field Renders a controlled <input> element that uses a callback function to inform its parent about value … componentsinput
• Countdown timer Renders a countdown timer that prints a message when it reaches zero. Use the useState() hook to create a … componentsstate
• Data list Renders a list of elements from an array of primitives. Use the value of the isOrdered prop to conditionally … components
• Data table Renders a table with rows dynamically created from an array of primitives. Render a <table> element with … components
• Email link Renders a link formatted to send an email (mailto: link). Use the email, subject and body props to create a … components
• Expandable object tree view Renders a tree view of a JSON object or array with collapsible content. Use the value of the toggled prop to … componentsobjectstaterecursion
• File drag and drop area Renders a file drag and drop component for a single file. Create a ref, called dropRef and bind it to the … componentsinputstateeffectevent
• Modal dialog Renders a Modal component, controllable through events. Define a keydownHandler that handles all keyboard … componentseffect
• Object table view Renders a table with rows dynamically created from an array of objects and a list of property names. Use … componentsarrayobject
• React useAsync hook Handles asynchronous calls. Create a custom hook that takes a handler function, fn. Define a reducer function … hooksstatereducer
• React useBodyScrollLock hook Enables body scroll locking. Use the useLayoutEffect() with an empty array as the second argument to execute … hookseffect
• React useClickInside hook Handles the event of clicking inside the wrapped component. Create a custom hook that takes a ref and a … hookseffectevent
• React useClickOutside hook Handles the event of clicking outside of the wrapped component. Create a custom hook that takes a ref and a … hookseffectevent
• React useComponentDidMount hook Executes a callback immediately after a component is mounted. Use the useEffect() hook with an empty array as … hookseffect
• React useComponentDidUpdate hook Executes a callback immediately after a component is updated. Use the useRef() hook to create a variable, … hookseffect
• React useComponentWillUnmount hook Executes a callback immediately before a component is unmounted and destroyed. Use the useEffect() hook with … hookseffect
• React useCopyToClipboard hook Copies the given text to the clipboard. Use the copyToClipboard snippet to copy the text to clipboard. Use the … hookseffectstatecallback
• React useDebounce hook Debounces the given value. Create a custom hook that takes a value and a delay. Use the useState() hook to … hooksstateeffect
• React useDefault hook Creates a stateful value with a default fallback if it’s null or undefined, and a function to update it. … hooksstate
• React useDelayedState hook Delays creating a stateful value until some condition is met. Use the useState() hook to create a stateful … hooksstateeffect
• React useEffectOnce hook Runs a callback at most once when a condition becomes true. Use the useRef() hook to create a variable, … hookseffect
• React useError hook Creates an error dispatcher. Use the useState() hook to create a state variable that holds the error. Use the … hooksstateeffect
• React useEventListener hook Adds an event listener for the specified event type on the given element. Use the useRef() hook to create a … hookseffectevent
• React useFetch hook Implements fetch() in a declarative manner. Create a custom hook that takes a url and options. Use the … hookseffectstate
• React useForm hook Creates a stateful value from the fields in a form. Use the useState() hook to create a state variable for the … hooksstate
• React useGetSet hook Creates a stateful value, returning a getter and a setter function. Use the useRef() hook to create a ref that … hooksstate
• React useHash hook Tracks the browser’s location hash value, and allows changing it. Use the useState() hook to lazily get … hooksstateeffect
• React useHover hook Handles the event of hovering over the wrapped component. Use the useState() hook to create a variable that … hooksstatecallback
• React useIntersectionObserver hook Observes visibility changes for a given element. Use the useState() hook to store the intersection value of … hooksstateeffect
• React useInterval hook Implements setInterval() in a declarative manner. Create a custom hook that takes a callback and a delay. Use … hookseffect
• React useIsomporphicEffect hook Eesolves to useEffect() on the server and useLayoutEffect() on the client. Use typeof to check if the Window … hookseffect
• React useKeyPress hook Listens for changes in the pressed state of a given key. Use the useState() hook to create a state variable … hooksstateeffectevent
• React useLocalStorage hook Creates a stateful value that is persisted to localStorage, and a function to update it. Use the useState() … hooksstate
• React useMap hook Creates a stateful Map object, and a set of functions to manipulate it. Use the useState() hook and the Map … hooksstate
• React useMediaQuery hook Checks if the current environment matches a given media query and returns the appropriate value. Check if … hooksstateeffect
• React useMergeState hook Creates a stateful value, and a function to update it by merging the new state provided. Use the useState() … hooksstate
• React useMutationObserver hook Watches for changes made to the DOM tree, using a MutationObserver Use a useEffect() hook that depends on the … hookseffect
• React useNavigatorOnLine hook Checks if the client is online or offline. Create a function, getOnLineStatus, that uses the Navigator.onLine … hooksstateeffect
• React useOnGlobalEvent hook Executes a callback whenever an event occurs on the global object. Use the useRef() hook to create a variable, … hookseffectevent
• React useOnWindowResize hook Executes a callback whenever the window is resized. Use the useRef() hook to create a variable, listener, … hookseffectevent
• React useOnWindowScroll hook Executes a callback whenever the window is scrolled. Use the useRef() hook to create a variable, listener, … hookseffectevent
• React usePersistedState hook Returns a stateful value, persisted in localStorage, and a function to update it. Use the useState() hook to … hooksstateeffect
• React usePortal hook Creates a portal, allowing rendering of children outside the parent component. Use the useState() hook to … hooksstateeffect
• React usePrevious hook Stores the previous state or props. Create a custom hook that takes a value. Use the useRef() hook to create a … hooksstateeffect
• React useRequestAnimationFrame hook Runs an animating function, calling it before every repaint. Use the useRef() hook to create two variables. … hookseffect
• React useScript hook Dynamically loads an external script. Use the useState() hook to create a state variable for the load status … hookseffectstateevent
• React useSearchParam hook Tracks the browser’s location search param. Use the useCallback() hook to create a callback that uses … hooksstateeffect
• React useSessionStorage hook Creates a stateful value that is persisted to sessionStorage, and a function to update it. Use the useState() … hooksstate
• React useSet hook Creates a stateful Set object, and a set of functions to manipulate it. Use the useState() hook and the Set … hooksstate
• React useSSR hook Checks if the code is running on the browser or the server. Create a custom hook that returns an appropriate … hookseffectstatememo
• React useTimeout hook Implements setTimeout() in a declarative manner. Create a custom hook that takes a callback and a delay. Use … hookseffect
• React useTitle hook Sets the title of the page Use typeof to determine if the Document is defined or not. Use the useRef() hook to … hookseffect
• React useToggler hook Provides a boolean state variable that can be toggled between its two states. Use the useState() hook to … hooksstatecallback
• React useUnload hook Handles the beforeunload window event. Use the useRef() hook to create a ref for the callback function, fn. … hookseffectevent
• React useUpdate hook Forces the component to re-render when called. Use the useReducer() hook that creates a new object every time … componentsreducer
• React useWindowSize hook Tracks the dimensions of the browser window. Use the useState() hook to initialize a state variable that will … hooksstateeffect
• Show/hide password toggle Renders a password input field with a reveal button. Use the useState() hook to create the shown state … componentsinputstate
• Spinning loader Renders a spinning loader component. Render an SVG, whose height and width are determined by the size prop. … components
• Star rating Renders a star rating component. Define a Star component. It renders each individual star with the appropriate … componentschildreninputstate
• Stateful checkbox with multiple selection Renders a checkbox list that uses a callback function to pass its selected value/values to the parent … componentsinputstatearray
• Tabs Renders a tabbed menu and view component. Define a Tabs component. Use the useState() hook to initialize the … componentsstatechildren
• Tag input field Renders a tag input field. Define a TagInput component and use the useState() hook to initialize an array from … componentsinputstate
• Textarea with character limit Renders a textarea component with a character limit. Use the useState() hook to create the content state … componentsstatecallbackevent
• Textarea with word limit Renders a textarea component with a word limit. Use the useState() hook to create a state variable, containing … componentsinputstatecallbackeffectevent
• Toggle Renders a toggle component. Use the useState() hook to initialize the isToggledOn state variable to … componentsstate
• Tooltip Renders a tooltip component. Use the useState() hook to create the show variable and initialize it to false. … componentsstatechildren
• Uncontrolled input field Renders an uncontrolled <input> element that uses a callback function to inform its parent about value … componentsinput
• Uncontrolled range input Renders an uncontrolled range input element that uses a callback function to pass its value to the parent … componentsinput
• Uncontrolled select element Renders an uncontrolled <select> element that uses a callback function to pass its value to the parent … componentsinput
• Uncontrolled textarea element Renders an uncontrolled <textarea> element that uses a callback function to pass its value to the parent … componentsinput

No snippet matches that filter.