React Snippets

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

  • FileDrop

    React, Components

    Renders a file drag and drop component for a single file.

  • StarRating

    React, Components

    Renders a star rating component.

  • usePersistedState

    React, Hooks

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

  • MappedTable

    React, Components

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

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

  • useKeyPress

    React, Hooks

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

  • useSearchParam

    React, Hooks

    Tracks the browser's location search param.

  • 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.

  • 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?

  • useHash

    React, Hooks

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

  • useWindowSize

    React, Hooks

    Tracks the dimensions of the browser window.

  • 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?

  • useHover

    React, Hooks

    Handles the event of hovering over the wrapped component.

  • useScript

    React, Hooks

    Dynamically loads an external script.

  • useSSR

    React, Hooks

    Checks if the code is running on the browser or the server.