React Snippets

The React snippet collection contains function components and reusable hooks for React 16.

  • Controlled input field

    Renders a controlled <input> element that uses a callback function to inform its parent about value updates.

    React, Components · Nov 3, 2020

  • Uncontrolled range input

    Renders an uncontrolled range input element that uses a callback function to pass its value to the parent component.

    React, Components · Nov 25, 2020

  • Uncontrolled input field

    Renders an uncontrolled <input> element that uses a callback function to inform its parent about value updates.

    React, Components · Nov 3, 2020

  • React useUpdate hook

    Forces the component to re-render when called.

    React, Components · Sep 24, 2021

  • Collapsible content

    Renders a component with collapsible content.

    React, Components · Oct 13, 2021

  • Data table

    Renders a table with rows dynamically created from an array of primitives.

    React, Components · Nov 3, 2020

  • React useDebounce hook

    Debounces the given value.

    React, Hooks · Jan 4, 2021

  • React useEventListener hook

    Adds an event listener for the specified event type on the given element.

    React, Hooks · Sep 1, 2021

  • React useSet hook

    Creates a stateful Set object, and a set of functions to manipulate it.

    React, Hooks · Nov 1, 2021

  • React useCopyToClipboard hook

    Copies the given text to the clipboard.

    React, Hooks · Nov 16, 2020

  • React useForm hook

    Creates a stateful value from the fields in a form.

    React, Hooks · Sep 17, 2021

  • React useIntersectionObserver hook

    Observes visibility changes for a given element.

    React, Hooks · Sep 10, 2021

  • React useMediaQuery hook

    Checks if the current environment matches a given media query and returns the appropriate value.

    React, Hooks · Oct 13, 2021

  • Tip: Label your useState values in React developer tools

    When working with multiple useState hooks in React, things can get a bit complicated while debugging. Luckily, there's an easy way to label these values.

    React, Hooks · Nov 7, 2021

  • Testing React portals

    Testing React components that use portals can be difficult until you understand what you really need to be testing.

    React, Testing · Mar 13, 2022

1 5 7