Cursor

NPM
v0.0.115

#Installation

npm install @solid-primitives/cursor
yarn add @solid-primitives/cursor
pnpm add @solid-primitives/cursor

#Readme

Two simple primitives for setting cursor css property reactively.

#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