@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

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.

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.

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