useStyleTag

v0.0.14testeddemo

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 }

Property	Type	Default	Description
`id`	`string`	—	DOM `id` of the injected `<style>` tag.
`css`	`ShallowRef<string>`	—	Reactive, writable CSS text content of the tag.
`load`	`() => void`	—	Inject the `<style>` tag into `<head>` (or reuse an existing one).
`unload`	`() => void`	—	Remove the `<style>` tag from `<head>` when no other instance references it.
`isLoaded`	`Readonly<ShallowRef<boolean>>`	—	Whether the tag is currently loaded.