Cursor

Primitives for setting CSS cursor property reactively.

npm i @solid-primitives/cursor@next

Utilities for setting the CSS cursor property via reactive primitives (createBodyCursor, createElementCursor) and imperative APIs (makeBodyCursor, makeElementCursor).

• makeBodyCursor - Set cursor on body immediately; returns a cleanup function.
• makeElementCursor - Set cursor on an element immediately; returns a cleanup function.
• createBodyCursor - Set cursor on body reactively.
• createElementCursor - Set cursor on a specific element reactively.
• createDragCursor - Show grab/grabbing cursors during pointer drag.
• cursorRef - Ref factory for inline JSX use.

makeBodyCursor

Sets a cursor on the body element immediately and returns a cleanup function that restores the previous value. No reactive owner required.

import { makeBodyCursor } from "@solid-primitives/cursor";

// Show a loading cursor during an async operation
const restore = makeBodyCursor("wait");
await doSomething();
restore();

makeElementCursor

Sets a cursor on a specific element immediately and returns a cleanup function that restores the previous value. No reactive owner required.

import { makeElementCursor } from "@solid-primitives/cursor";

const el = document.querySelector("#element")!;
const restore = makeElementCursor(el, "not-allowed");
// ... later
restore();

createBodyCursor

Sets a cursor on the body element reactively. The cursor is removed when the owner is disposed or when the signal returns a falsy value.

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

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

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

setCursor("help");

createElementCursor

Sets a cursor on a specific element reactively. Accepts an element or a signal returning one — returning a falsy value unsets the cursor.

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");

createDragCursor

Shows "grab" on a target element and switches to "grabbing" on the body during a pointer drag. Setting "grabbing" on the body ensures the cursor renders correctly everywhere during drag, not just over the target element.

import { createDragCursor } from "@solid-primitives/cursor";

const [ref, setRef] = createSignal<HTMLElement>();

createDragCursor(ref);

<div ref={setRef}>Drag me</div>

Custom cursor values can be provided via options:

createDragCursor(el, { grab: "crosshair", grabbing: "move" });

cursorRef

A ref factory for setting a cursor inline in JSX. Accepts a static cursor value or a reactive signal. The cursor is removed when the component unmounts.

import { cursorRef } from "@solid-primitives/cursor";

// Static
<div ref={cursorRef("pointer")}>...</div>;

// Reactive
const [cursor, setCursor] = createSignal<CursorProperty>("pointer");
<div ref={cursorRef(cursor)}>...</div>;

Changelog

See CHANGELOG.md