@solid-primitives/active-element

@solid-primitives/active-element

• createActiveElement - A reactive document.activeElement. Check which element is currently focused.
• createIsElementActive - Pass in an element, and see if it's focused.

Installation

npm install @solid-primitives/active-element
# or
yarn add @solid-primitives/active-element

createActiveElement

A reactive document.activeElement. Check which element is currently focused.

How to use it

import { createActiveElement } from "@solid-primitives/active-element";

const [activeEl, clear] = createActiveElement();

createEffect(() => {
  console.log(activeEl());
});

// clear all event listeners
clear();

Types

function createActiveElement(): [getter: Accessor<null | Element>, clear: ClearListeners];

createIsElementActive

Pass in an element, and see if it's focused.

How to use it

import { createIsElementActive } from "@solid-primitives/active-element";

const [isFocused, clear] = createIsElementActive(() => el);
// "stop" and "start" are for adding and removing event listeners

// you can also use signals for ref
const [ref, setRef] = createSignal<Element>();
const [isFocused] = createIsElementActive(ref);
// this way if the element changes,
// the "isFocused" will start checking the new element

// clear all event listeners
clear();

As Directive

import { isElementActive } from "@solid-primitives/active-element";
// prevent tree-shaking
isElementActive;

const [active, setActive] = createSignal(false)

<input use:isElementActive={setActive} />

Types

function createIsElementActive(
  target: MaybeAccessor<Element>
): [getter: Accessor<boolean>, clear: ClearListeners];

type IsElementActiveProps = (isActive: boolean) => void;

Demo

https://codesandbox.io/s/solid-primitives-active-element-q4kul?file=/index.tsx

Changelog

Expand Changelog

1.0.0

Initial release as a Stage-2 primitive.

1.0.1

Updated event listener and util dependencies.