{"version":"1.0","type":"rich","title":"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.","description":"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.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-cea3472d713ae27ec7c49e4e70cd3b6e?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}