useStyleTag
A React Hook that helps to apply a style tag to the document with ease in React.
Demo
Try to click to load css, and then edit the style (such as * { color: red; }) in the input box below and see the style applied to the document.
Usage
See API for more details.
Source
Click links below to view source on GitHub.
API
const styleTag = useStyleTag(initialCss, options)
Options
export interface UseStyleTagOptions {
/**
* Media query for styles to apply
*/
media?: string
/**
* Whether to load the style tag immediately
*
* @defaultValue true
*/
immediate?: boolean
/**
* Whether to manually load the style tag
*
* @defaultValue false
*/
manual?: boolean
/**
* Unique identifier of the style tag
*
* @defaultValue auto-incremented
*/
id?: string
}
Returns
export interface UseStyleTagReturns {
/**
* Unique identifier of the style tag
*/
id: string
/**
* CSS content
*/
css: string
/**
* Set CSS content
*/
setCss: (newCss: string) => void
/**
* Reset CSS content to initial value
*/
resetCss(): void
/**
* Load the style tag
*/
load(): void
/**
* Unload the style tag
*/
unload(): void
/**
* A ref that holds the style tag element
*/
styleTag: MutableRefObject<HTMLStyleElement | null>
/**
* A ref that holds the loading state of the style tag
*/
isLoaded: MutableRefObject<boolean>
}
