@solid-primitives/event-props/dist/index.js

Primitive to manage events in a reactive way.

import { createSignal } from "solid-js";
/**
 * Creates the props for certain events for an intrinsic JSX element and a store with the received events
 * @param names of the events that should be available in props and store
 * @returns [eventStore, eventProps]
 * @example
 * ```ts
 * const [events, eventProps] = createEventProps('mousedown', 'mousemove', 'mouseup');
 *
 * const isMouseDown = createMemo(() => (events.mousedown?.ts ?? 0) > (events.mouseup?.ts ?? 1));
 *
 * createEffect(() => {
 *   if (isMouseDown()) {
 *     console.log(events.mousemove?.clientX, events.mousemove?.clientY);
 *   }
 * });
 *
 * <div {...eventProps}>Click and drag on me</div>
 * ```
 */
export const createEventProps = (...names) => {
    const store = {};
    const eventProps = {};
    names.forEach(name => {
        const [accessor, setter] = createSignal();
        Object.defineProperty(store, name, { get: accessor, set: setter, enumerable: true });
        eventProps[`on${name}`] = setter;
    });
    return [store, eventProps];
};