@solid-primitives/cursor


Two simple primitives for setting cursor css property reactively.

- createElementCursor - Set provided cursor to given HTML Element styles reactively.
- createBodyCursor - Set selected cursor to body element styles reactively.

Installation

``bash
npm install @solid-primitives/cursor


or

yarn add @solid-primitives/cursor

or

pnpm add @solid-primitives/cursor
`

createElementCursor

Set provided cursor to given HTML Element styles reactively.

It takes two arguments:

- element - HTMLElement or a reactive signal returning one. Returning falsy value will unset the cursor.
- cursor - Cursor css property. E.g. "pointer", "grab", "zoom-in", "wait", etc.

`ts
import { createElementCursor } from "@solid-primitives/cursor";

const target = document.querySelector("#element");
const [cursor, setCursor] = createSignal("pointer");
const [enabled, setEnabled] = createSignal(true);

createElementCursor(() => enabled() && target, cursor);

setCursor("help");
`

createBodyCursor

Set selected cursor to body element styles reactively.

It takes only one argument:

- cursor - Signal returing a cursor css property. E.g. "pointer", "grab", "zoom-in", "wait", etc. Returning falsy value will unset the cursor.

`ts
import { createBodyCursor } from "@solid-primitives/cursor";

const [cursor, setCursor] = createSignal("pointer");
const [enabled, setEnabled] = createSignal(true);

createBodyCursor(() => enabled() && cursor());

setCursor("help");
``

Changelog

See CHANGELOG.md