README
@solid-primitives/active-element
createActiveElement
- A reactivedocument.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.
1.0.2
Updated to Solid 1.3