@spelyco/react-lib

Shared hooks and utilities used by @spelyco/react and @spelyco/react-native.

You can also install it standalone if you only need the hooks.

Install

bun add @spelyco/react-lib

Hooks

useBoolean

A simple true/false toggle — great for modals, dropdowns, or anything that opens/closes.

import { useBoolean } from "@spelyco/react-lib";

function MyModal() {
  const { value: isOpen, setTrue: open, setFalse: close, toggle } = useBoolean(false);

  return (
    <>
      <button onClick={open}>Open modal</button>
      <button onClick={toggle}>Toggle</button>

      {isOpen && (
        <dialog>
          <p>Modal content</p>
          <button onClick={close}>Close</button>
        </dialog>
      )}
    </>
  );
}

What you get back:

| Name | Type | What it does | | --- | --- | --- | | value | boolean | The current state | | setTrue | () => void | Set to true | | setFalse | () => void | Set to false | | toggle | () => void | Flip between true/false | | setValue | (v: boolean) => void | Set any value manually |

useDebounce

Waits until the user stops typing before updating the value. Perfect for search inputs — you don't want to fire an API call on every keystroke.

import { useDebounce } from "@spelyco/react-lib";
import { useEffect, useState } from "react";

function Search() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 400); // wait 400ms after last keystroke

  useEffect(() => {
    if (debouncedQuery) {
      fetchResults(debouncedQuery); // only runs when user stops typing
    }
  }, [debouncedQuery]);

  return <input onChange={(e) => setQuery(e.target.value)} placeholder="Search..." />;
}

Parameters:

| Parameter | Type | Default | Description | | --- | --- | --- | --- | | value | T | — | The value to debounce | | delay | number | 300 | Wait time in milliseconds |

Theme types

Framework-agnostic theme contract consumed by both @spelyco/react and @spelyco/react-native.

import type { SpelycoTheme, SpelycoThemeOverride, ColorTuple } from "@spelyco/react-lib";

The runtime helpers that produce a theme live in the platform packages — theme() from @spelyco/react for web (Mantine), and SpelycoProvider's defaults for React Native.

License

MIT