Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | import { useEffect } from 'react';
/**
* React hook for injecting stylesheets into the document head.
* Automatically cleans up stylesheets when the component unmounts.
*
* @example
* ```tsx
* import styles from './my-component.css';
*
* function MyComponent() {
* useStylesheet('my-component-styles', styles);
* return <div>...</div>;
* }
* ```
*
* @param id Unique ID for the stylesheet element.
* @param content CSS content to inject.
* @param cleanup Whether to remove the stylesheet on unmount. Defaults to false.
*/
export function useStylesheet(id: string, content: string, cleanup = false): void {
useEffect(() => {
if (!document.getElementById(id)) {
const style = document.createElement('style');
style.id = id;
style.textContent = content;
document.head.appendChild(style);
}
return () => {
if (cleanup) {
const style = document.getElementById(id);
if (style) {
style.remove();
}
}
};
}, [id, content, cleanup]);
}
|