@solid-primitives/event-listener
A helpful event listener primitive that binds window and any element supplied.
Installation
npm install @solid-primitives/event-listener
yarn add @solid-primitives/event-listener
createEventListener
Can be used to listen to DOM or Custom Events on window, document, list of HTML elements or any EventTarget. The target prop can be reactive.
How to use it
import { createEventListener } from "@solid-primitives/event-listener";
createEventListener(
document.getElementById("mybutton"),
"mousemove",
e => console.log("x:", e.pageX, "y:", e.pageY),
{ passive: true }
);
const [ref, setRef] = createSignal<HTMLElement>();
const [name, setName] = createSignal("mousemove");
const [options, setOptions] = createSignal({ passive: true });
createEventListener(ref, name, e => {}, options);
createEventListener<{ myCustomEvent: Event }>(window, "myCustomEvent", () => console.log("yup!"));
Directive Usage
props passed to the directive are also reactive, so you can change handlers on the fly.
import { eventListener } from "@solid-primitives/event-listener";
eventListener;
<button use:eventListener={["click", () => console.log("Click")]}>Click!</button>;
Types
function createEventListener<
EventMap extends Record<string, Event>,
EventName extends keyof EventMap
>(
target: MaybeAccessor<Many<EventTarget>>,
eventName: MaybeAccessor<EventName>,
handler: (event: EventMap[EventName]) => void,
options?: MaybeAccessor<boolean | AddEventListenerOptions>
): void;
function eventListener(
target: Element,
props: Accessor<EventListenerDirectiveProps>
): EventListenerReturn;
type EventListenerDirectiveProps = [
name: string,
handler: (e: any) => void,
options?: AddEventListenerOptions | boolean
];
createEventSignal
Like createEventListener
, but events are handled with the returned signal, instead of with a callback.
How to use it
import { createEventSignal } from "@solid-primitives/event-listener";
const lastEvent = createEventSignal(el, "mousemove", { passive: true });
createEffect(() => {
console.log(lastEvent()?.x, lastEvent()?.y);
});
createEventListenerMap
A helpful primitive that listens to a map of events. Handle them by individual callbacks.
How to use it
import { createEventListenerMap } from "@solid-primitives/event-listener";
createEventListenerMap(element, {
mousemove: mouseHandler,
mouseenter: e => {},
touchend: touchHandler
});
const [target, setTarget] = createSignal(document.getElementById("abc"));
const [options, setOptions] = createSignal({ passive: true });
createEventListenerMap(
target,
{
mousemove: e => {},
touchstart: e => {}
},
options
);
createEventListenerMap<
{
myEvent: MyEvent;
custom: Event;
other: Event;
},
"myEvent" | "custom"
>(target, {
myEvent: e => {},
custom: e => {}
});
Directive usage
import { eventListenerMap } from "@solid-primitives/event-listener";
eventListenerMap;
<div
use:eventListenerMap={{
mousemove: e => {},
click: clickHandler,
touchstart: () => {},
myCustomEvent: e => {}
}}
></div>;
Types
function createEventListenerMap<
EventMap extends Record<string, Event>,
UsedEvents extends keyof EventMap = keyof EventMap
>(
target: MaybeAccessor<Many<EventTarget>>,
handlersMap: EventHandlersMap,
options?: MaybeAccessor<boolean | AddEventListenerOptions>
): void;
createEventStore
Similar to createEventListenerMap
, but provides a reactive store with the latest captured events.
How to use it
const lastEvents = createEventStore(el, "mousemove", "touchend", "click");
createEffect(() => {
console.log(lastEvents?.mousemove.x);
});
const [target, setTarget] = createSignal(document.getElementById("abc"));
const [options, setOptions] = createSignal({ passive: true });
const lastEvents = createEventStore(target, options, "mousemove", "touchmove");
const lastEvents = createEventStore<
{
myEvent: MyEvent;
custom: Event;
},
"myEvent" | "custom"
>(target, "myEvent", "custom");
const { mousemove } = createEventStore(target, "mousemove", ...);
types
function createEventStore<
EventMap extends Record<string, Event>,
UsedEvents extends keyof EventMap = keyof EventMap
>(
target: MaybeAccessor<Many<EventTarget>>,
...eventNames: UsedEvents[]
): Store<Partial<Pick<EventMap, UsedEvents>>>;
function createEventStore<
EventMap extends Record<string, Event>,
UsedEvents extends keyof EventMap = keyof EventMap
>(
target: MaybeAccessor<Many<EventTarget>>,
options: MaybeAccessor<boolean | AddEventListenerOptions>,
...eventNames: UsedEvents[]
): Store<Partial<Pick<EventMap, UsedEvents>>>;
WindowEventListener
Listen to the window
DOM Events, using a component.
You can use it with any Solid's Control-Flow components, e.g. <Show/>
or <Switch/>
.
The event handler prop is reactive, so you can use it with signals.
How to use it
import { WindowEventListener } from "@solid-primitives/event-listener";
<WindowEventListener onMouseMove={e => console.log(e.x, e.y)} />;
DocumentEventListener
The same as WindowEventListener
, but listens to document
events.
How to use it
import { DocumentEventListener } from "@solid-primitives/event-listener";
<DocumentEventListener onMouseMove={e => console.log(e.x, e.y)} />;
Demo
You may view a working example here: https://codesandbox.io/s/solid-primitives-event-listener-elti5
Changelog
Expand Changelog
0.0.100
First ported commit from react-use-event-listener.
1.1.4
Released a version with type mostly cleaned up.
1.2.3
Switched to a more idiomatic pattern: Warning: incompatible with the previous version!
1.2.5
Added CJS build.
1.2.6
Migrated to new build process.
1.3.0
(minor breaking changes to type generics and returned functions)
Primitive rewritten to provide better types and more reliable usage. Added more primitives.