useStyleTag

Dynamically inject and remove a <style> tag in document.head. The tag is appended on mount and removed on unmount. Supports reactive CSS updates via css$ and optional manual lifecycle management.

Demo

useStyleTag

Not injected

Dynamically inject and remove CSS styles in document.head.

Styled by injected CSS

.demo-box { padding: 1rem; border-radius: 8px; background: oklch(0.7 0.15 250); color: white; font-weight: bold; text-align: center; }

InjectRemove

Usage

Hook

import { useStyleTag } from "@usels/web";

function Component() {
  const { isLoaded$ } = useStyleTag("body { background: #f0f0f0; }");

  return <div>{isLoaded$.get() ? "Styles injected" : "Loading..."}</div>;
}

Scope

import { createStyleTag } from "@usels/web";

function Component() {
  "use scope"
  const { isLoaded$ } = createStyleTag("body { background: #f0f0f0; }");

  return <div>{isLoaded$.get() ? "Styles injected" : "Loading..."}</div>;
}

Reactive CSS updates

Update css$ at any time to change the injected styles without re-mounting.

Hook

import { useStyleTag } from "@usels/web";

function Component() {
  const { css$, isLoaded$ } = useStyleTag(".box { color: red; }");

  return (
    <div>
      <button onClick={() => css$.set(".box { color: blue; }")}>Change color</button>
      <div className="box">Styled box</div>
    </div>
  );
}

Scope

import { createStyleTag } from "@usels/web";

function Component() {
  "use scope"
  const { css$, isLoaded$ } = createStyleTag(".box { color: red; }");

  return (
    <div>
      <button onClick={() => css$.set(".box { color: blue; }")}>Change color</button>
      <div className="box">Styled box</div>
    </div>
  );
}

Pass an Observable as CSS

If you already have an Observable holding your CSS string, pass it directly.

import { observable } from "@usels/core";
import { useStyleTag } from "@usels/web";

const theme$ = observable("body { background: white; }");

function Component() {
  useStyleTag(theme$);
  // Updating theme$ automatically updates the injected style tag
}

Manual control

Set manual: true to take full control of when the style tag is injected and removed.

Hook

import { useStyleTag } from "@usels/web";

function Component() {
  const { load, unload, isLoaded$ } = useStyleTag(".box { color: red; }", {
    manual: true,
  });

  return (
    <div>
      <button onClick={load}>Inject</button>
      <button onClick={unload}>Remove</button>
      <p>{isLoaded$.get() ? "Injected" : "Not injected"}</p>
    </div>
  );
}

Scope

import { createStyleTag } from "@usels/web";

function Component() {
  "use scope"
  const { load, unload, isLoaded$ } = createStyleTag(".box { color: red; }", {
    manual: true,
  });

  return (
    <div>
      <button onClick={load}>Inject</button>
      <button onClick={unload}>Remove</button>
      <p>{isLoaded$.get() ? "Injected" : "Not injected"}</p>
    </div>
  );
}

With options

import { useStyleTag } from "@usels/web";

useStyleTag(".box { color: red; }", {
  id: "my-style", // custom id for the style element
  media: "print", // CSS media query
  nonce: "abc123", // Content Security Policy nonce
  immediate: true, // default: true — inject on mount
  manual: false, // default: false — auto lifecycle management
});

Type

Parameters

Parameter	Type	Description
css	MaybeObservable<string>	- Initial CSS content (MaybeObservable<string> — kept in sync with css$).
options	UseStyleTagOptions (optional)	- Mount-time-only options (id, media, immediate, manual, nonce, document).

UseStyleTagOptions

Option	Type	Default	Description
id	string	auto-generated	Style tag id
media	string	-	CSS media query
immediate	boolean	true	Load the style tag immediately on mount
manual	boolean	false	Manual mode — load/unload are not called automatically on mount/unmount
nonce	string	-	Nonce attribute for Content Security Policy
document	Document	-	Custom document instance (useful for iframes or testing)

Returns

UseStyleTagReturn

Name	Type	Description
id	string	-
css$	ObservablePrimitive<string>	CSS content — update to change injected styles dynamically
isLoaded$	ReadonlyObservable<boolean>	-
load	() => void	-
unload	() => void	-

Source

View on GitHub