Skip to main content
100%

Hook that reads/writes #CSS variables. Turns a CSS variable into a useState() hook for your web components and lets you change them at run-time.

✓ Published0🌍 Public
Aabonello
Last edited Jul 8, 2021
Created on Dec 30, 2021

This example demonstrates a React hook that bridges CSS variables and component state, allowing developers to read and update a CSS custom property at run-time. It shows how a single value can be synchronized between a React component’s state and the document’s stylesheet, enabling dynamic theming or style changes without a separate state management system. The `useCSSVariable` hook initializes its state by reading the variable via `window.getComputedStyle` and `document.documentElement`, then updates both the React state and the CSS property using `setProperty`. It relies on React’s `useState` and `useCallback` APIs, and returns a tuple similar to `useState` for easy integration.

AI-generated description

Similar vizzes

Loading thumbnail…

Hook that increments a counter every time useState() is changed.

This example demonstrates a React hook that tracks how many times a component’s state value is updated. The hook, `useStateCount`, returns both the current value and an incrementing counter that increases each time `setValue` is called. It uses React’s `useState` to store a tuple of `[count, value]` and `useCallback` to memoize the update function, depending on the current count. The code is written in TypeScript and shows a pattern for monitoring state changes without external libraries, relying solely on React’s built-in hooks.

Aabonello
66% match
Loading thumbnail…

A hook that persists useState() to localStorage.

This example demonstrates a custom React hook that synchronizes a component’s state with the browser’s localStorage, enabling persistent data across page reloads. The hook, `useStateStorage`, initializes state with a provided default value and reads any stored JSON from localStorage on mount, updating the state if valid. It exposes a setter function that writes both the new state and its JSON-serialized form to localStorage. The code uses React’s `useState`, `useEffect`, and `useCallback` APIs to manage lifecycle and memoization, while leveraging `localStorage.getItem` and `localStorage.setItem` for storage operations.

Aabonello
65% match
Loading thumbnail…

Hook that toggles a boolean state.

This example demonstrates a React hook that manages a boolean state and provides a toggle function. It shows how to initialize the state with a default value and update it based on an optional argument. The code uses `useState` to hold the boolean and `useCallback` to memoize the toggle callback, which flips the previous state unless a boolean value is explicitly passed. The hook returns the current state and the callback as a tuple, enabling flexible state control in components.

Aabonello
64% match
Loading thumbnail…

Hook that emits the previous and current values of useState()

This example demonstrates a React hook that tracks both the previous and current values of a state variable, returning them as a pair for comparison or animation. The `useStatePair` hook initializes with an undefined previous value and the provided initial state, then uses a `setPair` callback to update the tuple whenever `setValue` is called. It relies on React’s `useState` and `useCallback` APIs to manage the state pair and memoize the update function, ensuring stable references. The code shows a generic pattern for observing state transitions without additional libraries.

Aabonello
63% match
Loading thumbnail…

React cheatsheet

This animated React cheatsheet presents reusable code patterns for hooks, state management, and component composition. The example uses React hooks including `useState`, `useEffect`, `useRef`, `useReducer`, and `useContext`, alongside custom hooks like `useTimeout` and higher-order components. It demonstrates conditional JSX rendering, callback-based state updates, and the containment pattern via props slots. The animation shows code snippets transitioning between sections, sourced from a gist by abernier.

Aabernier
62% match
Loading thumbnail…

Hook that debounces useState() changes.

This React hook demonstrates how to debounce state updates from `useState` by wrapping the setter in a custom `useStateDebounce` function. It uses `useCallback`, `useRef`, and `useEffect` to manage a `window.setTimeout` and `window.clearTimeout` pair, delaying the `setState` call by a specified `ms` interval. The hook accepts an initial state value and returns the debounced state and setter, preventing rapid re-renders from frequent input changes. The example is implemented as a TypeScript `.tsx` file, showing the logic in isolation without external data sources or visualization libraries.

Aabonello
61% match
Loading thumbnail…

Hook that stores a state value as a JSON string to prevent render updates when an object value is mutated but doesn't change.

This example demonstrates a React hook that stores a state value as a JSON string, preventing unnecessary render updates when an object is mutated but its content remains unchanged. It shows how `useState`, `useMemo`, and `useCallback` work together to serialize the initial state via `JSON.stringify`, parse it back with `JSON.parse` inside a memoized value, and provide a setter that stringifies the next value before updating state. The hook uses TypeScript generics for type safety, and the behavior is visible in the code, though it does not display any data visualization or rendering logic.

Aabonello
61% match
Loading thumbnail…

css-article-3.jsx

This example shows how to apply dynamic CSS styling to a React component using the `css` prop and the `styles` tag from the `@emotion/react` library. It defines a style object that sets a light blue background, a blue border, and rounded corners, and includes a hover state that darkens the background. The component renders a single `<div>` element that receives the styles via the `css` prop, demonstrating a straightforward way to manage scoped, inline styles in a React application. The code uses Emotion’s `css` template literal syntax, with no external data sources or complex rendering logic.

HHerbCaudill
61% match