React Snippets

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

  • Object table view

    Renders a table with rows dynamically created from an array of objects and a list of property names.

    React, Components · Sep 6, 2020

  • React useSearchParam hook

    Tracks the browser's location search param.

    React, Hooks · Oct 13, 2021

  • Countdown timer

    Renders a countdown timer that prints a message when it reaches zero.

    React, Components · Oct 13, 2021

  • Breaking React - a common pattern to avoid

    As powerful as React is, it is also quite fragile at places. Did you know that just a few lines are more than enough to break your entire React application?

    React, Debugging · Nov 6, 2021

  • Writing readable reducers in Redux

    When working with state in your code, you often run into issues with maintaining complexity and readability. Oftentimes, these issues are easily fixable.

    React, Logic · Jun 12, 2021

  • React useHash hook

    Tracks the browser's location hash value, and allows changing it.

    React, Hooks · Oct 2, 2021

  • React useHover hook

    Handles the event of hovering over the wrapped component.

    React, Hooks · Oct 5, 2021

  • React usePersistedState hook

    Returns a stateful value, persisted in localStorage, and a function to update it.

    React, Hooks · Oct 13, 2021

  • Lazy-loading image

    Renders an image that supports lazy loading.

    React, Components · Jul 29, 2022

  • Write a useInterval hook in React

    Wrapping your mind around React hooks and how they interact with setInterval() can be difficult. Here's a guide to get you started.

    React, Hooks · Sep 28, 2021

  • React useScript hook

    Dynamically loads an external script.

    React, Hooks · Oct 8, 2021

  • Uncontrolled select element

    Renders an uncontrolled <select> element that uses a callback function to pass its value to the parent component.

    React, Components · Nov 25, 2020

  • React useKeyPress hook

    Listens for changes in the pressed state of a given key.

    React, Hooks · Sep 7, 2021

  • Testing Redux-connected components with React Testing Library

    Testing Redux-connected components with React Testing Library is a very common scenario. Learn how to use this simple utility function to speed up your testing.

    React, Testing · Nov 7, 2021

  • An approach to testing stateful React components

    Testing stateful React components is by no means a difficult task, but did you know there is an elegant solution that doesn't involve testing state directly?

    React, Testing · Jun 12, 2021

1 2 7