@solid-primitives/cursor
v0.0.115
Published
Two simple primitives for setting cursor css property reactively.
Downloads
50,949
Readme
@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