Styles

Collection of reactive primitives focused on styles.

• createRemSize - Create a reactive signal of css rem size in pixels.

#createRemSize

Creates a reactive signal with value of the current rem size in pixels, and tracks it's changes.

#How to use it

It takes no arguments and returns a number signal.

import { createRemSize } from "@solid-primitives/styles";

const remSize = createRemSize();
console.log(remSize()); // 16

createEffect(() => {
  console.log(remSize()); // remSize value will be logged on every change to the root font size
});

#useRemSize

This primitive provides a singleton root variant that will reuse signals, HTML elements and the ResizeObserver instance across all dependents that use it.

It's behavior is the same as createRemSize.

import { useRemSize } from "@solid-primitives/styles";

const remSize = useRemSize();
console.log(remSize()); // 16

#Server fallback

When using this primitive on the server, it will return a signal with a value of 16 by default. You can override this value by calling the setServerRemSize helper with a new value, before calling createRemSize or useRemSize.

import { setServerRemSize, createRemSize } from "@solid-primitives/styles";

setServerRemSize(10);

const remSize = createRemSize();
console.log(remSize()); // 10 instead of 16 (only on the server!)

#Demo

Live Site

TODO

#Changelog

See CHANGELOG.md