useStyleTag

v0.0.15testeddemo

Inject a reactive `<style>` tag into the document `<head>`. The CSS is a writable ref — assigning to it updates the live stylesheet. Multiple instances sharing an `id` reuse a single element via reference counting, and everything is SSR-safe.

Source Tests

Examples

const { css, isLoaded } = useStyleTag('body { color: red }');
css.value = 'body { color: blue }';

// Manual control
const { load, unload } = useStyleTag('.a { color: red }', { manual: true });
load();
unload();

Demo

Loading demo…

Signature

export function useStyleTag(
  css: MaybeRefOrGetter<string>,
  options: UseStyleTagOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`css`	`MaybeRefOrGetter<string>`	—	Reactive CSS source for the tag
`options`?	`UseStyleTagOptions`	`{}`	Options

Returns

UseStyleTagReturn`{ id, css, load, unload, isLoaded }`