@library/react

Installation

npm

npm install @library/react

yarn

yarn add @library/react

react (>=18) is a peer dependency and must be installed in your project.

API

• useBoolean
• useDebounceValue
• useDisclosure
• useScrollReached

useBoolean

Primitive boolean flag with stable action callbacks.

import { useBoolean } from "@library/react";

const { value, setTrue, setFalse, toggle, setValue } = useBoolean(false);

setTrue(); // value becomes true
setFalse(); // value becomes false
toggle(); // value flips
setValue(true); // value set explicitly

useDebounceValue

Debounces a changing value. Follows lodash debounce semantics: with trailing (default) the debounced value updates once delay ms pass without further changes; with leading the first change after an idle period is applied immediately. Both can be combined. With both disabled the debounced value never updates.

import { useDebounceValue } from "@library/react";

const [query, setQuery] = useState("");
const debouncedQuery = useDebounceValue(query, 300);
// debouncedQuery updates 300ms after the user stops typing

const immediate = useDebounceValue(query, 300, {
  leading: true,
  trailing: false,
});
// immediate updates on the first keystroke, then ignores changes for 300ms

useDisclosure

Open/close state for dialogs, popovers, menus, expandable sections.

import { useDisclosure } from "@library/react";

const { isOpen, open, close, toggle, setOpen } = useDisclosure(false);

open(); // isOpen becomes true
close(); // isOpen becomes false
toggle(); // isOpen flips
setOpen(true); // isOpen set explicitly

useScrollReached

Tracks whether a scrollable element has been scrolled to each of its edges. Re-measures on scroll, when the element or any of its direct children resizes (via ResizeObserver), and when direct children are added or removed (via MutationObserver), so content loaded later is accounted for without a scroll. threshold is the pixel tolerance for treating an edge as reached (default 1).

import { useScrollReached } from "@library/react";

const { ref, isAtBottom } = useScrollReached<HTMLDivElement>({ threshold: 8 });

<div ref={ref} style={{ overflow: "auto", height: 300 }}>
  {items}
  {isAtBottom && <LoadMore />}
</div>;