@playbooks/hooks/dist/index.es.js

A collection of React hooks for Playbooks.

import { HooksContext, HooksProvider, useHooks } from "./context.es.js";
import { useEffect, useState } from "react";
import { useKeyDown, useKeyUp } from "./keyboard.es.js";
import { useMouseDown, useMouseEnter, useMouseLeave, useMouseMenu, useMouseUp } from "./mouse.es.js";
import { useNavigationComplete, useNavigationError, useNavigationStart } from "./navigation.es.js";
import { useAction, useConfirm, useDelete, useDeletes, useInit, useQuery, useSave } from "./store.es.js";
import { useDebounce, useDelay, useFocus, useInterval, useLoaded, useMounted } from "./utils.es.js";
import { useLocalStorage, useOffline, useOnline, useResize, useResizeTarget } from "./window.es.js";
import { useCount } from "./wrappers.es.js";
const useElementKeyDown = (element, method, listeners) => {
  useEffect(() => {
    if (element) element.addEventListener("keydown", method);
    return () => element && element.removeEventListener("keydown", method);
  }, [...listeners]);
};
const useElementMouseMenu = (element, method, listeners) => {
  useEffect(() => {
    if (element) element.addEventListener("contextmenu", method);
    return () => element && element.removeEventListener("contextmenu", method);
  }, [...listeners]);
};
const useElementMouseEnter = (element, method, listeners) => {
  useEffect(() => {
    if (element) element.addEventListener("mouseenter", method);
    return () => element && element.removeEventListener("mouseenter", method);
  }, [...listeners]);
};
const useElementMouseLeave = (element, method, listeners) => {
  useEffect(() => {
    if (element) element.addEventListener("mouseleave", method);
    return () => element && element.removeEventListener("mouseleave", method);
  }, [...listeners]);
};
const useElementResize = (element, method, listeners) => {
  useEffect(() => {
    if (element) element.addEventListener("resize", method);
    return () => element && element.removeEventListener("resize", method);
  }, [...listeners]);
};
const useElementObserver = (element, listeners) => {
  const [item, setItem] = useState(null);
  useEffect(() => {
    const observer = new ResizeObserver((entries) => setItem(entries[0]));
    if (element) observer.observe(element);
    return () => observer.disconnect();
  }, [...listeners]);
  return item;
};
const useElementHeight = (element, method, listeners) => {
  useEffect(() => {
    const observer = new ResizeObserver((entries) => {
      const item = entries[0];
      method(item.contentRect.height);
    });
    if (element) observer.observe(element);
    return () => observer.disconnect();
  }, [...listeners]);
};
const useElementWidth = (element, method, listeners) => {
  useEffect(() => {
    const observer = new ResizeObserver((entries) => {
      const item = entries[0];
      method(item.contentRect.width);
    });
    if (element) observer.observe(element);
    return () => observer.disconnect();
  }, [...listeners]);
};
export {
  HooksContext,
  HooksProvider,
  useAction,
  useConfirm,
  useCount,
  useDebounce,
  useDelay,
  useDelete,
  useDeletes,
  useElementHeight,
  useElementKeyDown,
  useElementMouseEnter,
  useElementMouseLeave,
  useElementMouseMenu,
  useElementObserver,
  useElementResize,
  useElementWidth,
  useFocus,
  useHooks,
  useInit,
  useInterval,
  useKeyDown,
  useKeyUp,
  useLoaded,
  useLocalStorage,
  useMounted,
  useMouseDown,
  useMouseEnter,
  useMouseLeave,
  useMouseMenu,
  useMouseUp,
  useNavigationComplete,
  useNavigationError,
  useNavigationStart,
  useOffline,
  useOnline,
  useQuery,
  useResize,
  useResizeTarget,
  useSave
};