hookbase

Hookbase

A lightweight collection of custom React hooks to simplify common tasks in your React applications. Hookbase provides reusable solutions for managing state, handling side effects, and interacting with browser APIs.

Installation

You can run Hookbase using npx or install it via npm:

npx hookbase

Or install it as a dependency:

npm install hookbase

Import the desired hooks into your React components:

import { useBoolean } from "@/hooks/use-boolean";

Hooks

useBoolean

Manages a boolean state with utility functions to toggle, set to true, or set to false.

Parameters

• defaultValue (boolean, optional): Initial boolean value. Defaults to false. Must be true or false.

Returns

An object with the following properties:

• value (boolean): Current boolean state.
• setValue (function): Updates the boolean state.
• setTrue (function): Sets the state to true.
• setFalse (function): Sets the state to false.
• toggle (function): Toggles the state between true and false.

Example

import { useBoolean } from "@/hooks/use-boolean";

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

  return (
    <div>
      <p>State: {value.toString()}</p>
      <button onClick={setTrue}>Set True</button>
      <button onClick={setFalse}>Set False</button>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}

useCopyToClipboard

Handles copying text to the clipboard with a temporary "copied" state indicator.

Parameters

• delay (number, optional): Duration (in milliseconds) the isCopied state remains true after copying. Defaults to 2000.

Returns

A tuple containing:

• copy (function): Async function to copy text to the clipboard. Returns true on success, false on failure.
• isCopied (boolean): Indicates if text was recently copied.

Example

import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";

function CopyButton() {
  const [copy, isCopied] = useCopyToClipboard();

  const handleCopy = async () => {
    const success = await copy("Hello, World!");
    console.log(success ? "Copied!" : "Copy failed");
  };

  return <button onClick={handleCopy}>{isCopied ? "Copied!" : "Copy Text"}</button>;
}

useDocumentTitle

Updates the document's title dynamically.

Parameters

• title (string): The title to set for the document.

Returns

None.

Example

import { useDocumentTitle } from "@/hooks/use-document-title";

function Page() {
  useDocumentTitle("My Page Title");
  return <h1>Hello, World!</h1>;
}

useInterval

Runs a callback function at specified intervals.

Parameters

• callback (function): Function to execute on each interval.
• delay (number | null): Interval duration in milliseconds. If null or not a number, the interval is paused.

Returns

None.

Example

import { useInterval } from "@/hooks/use-interval";

function Timer() {
  const [count, setCount] = React.useState(0);

  useInterval(() => {
    setCount(count + 1);
  }, 1000);

  return <p>Count: {count}</p>;
}

useIsomorphicLayoutEffect

A conditional alias for useLayoutEffect (client-side) or useEffect (server-side) to handle isomorphic rendering.

Usage

Use as a direct replacement for React.useLayoutEffect or React.useEffect.

Example

import { useIsomorphicLayoutEffect } from "@/hooks/use-isomorphic-layout-effect";

function Component() {
  useIsomorphicLayoutEffect(() => {
    console.log("Effect ran");
    return () => console.log("Cleanup");
  }, []);
  return <div>Isomorphic Effect</div>;
}

useTimeout

Executes a callback after a specified delay.

Parameters

• callback (function): Function to execute after the delay.
• delay (number | null): Delay in milliseconds. If null or not a number, the timeout is paused.

Returns

None.

Example

import { useTimeout } from "@/hooks/use-timeout";

function AlertComponent() {
  useTimeout(() => {
    alert("Timeout completed!");
  }, 3000);

  return <p>Waiting for timeout...</p>;
}

useToggle

Manages a boolean toggle state with a toggle function.

Parameters

• defaultValue (boolean, optional): Initial boolean value. Defaults to false.

Returns

A tuple containing:

• value (boolean): Current boolean state.
• toggle (function): Toggles the state between true and false.
• setValue (function): Updates the boolean state.

Example

import { useToggle } from "@/hooks/use-toggle";

function ToggleSwitch() {
  const [isOn, toggle] = useToggle(false);

  return <button onClick={toggle}>{isOn ? "On" : "Off"}</button>;
}

useUnmount

Executes a callback when the component unmounts.

Parameters

• func (function): Function to execute on unmount.

Returns

None.

Example

import { useUnmount } from "@/hooks/use-unmount";

function Component() {
  useUnmount(() => {
    console.log("Component unmounted");
  });
  return <div>Hello, World!</div>;
}

useCounter

Manages a numeric counter with increment, decrement, and reset functions.

Parameters

• initialValue (number, optional): Initial counter value. Defaults to 0.

Returns

An object with the following properties:

• count (number): Current counter value.
• increment (function): Increments the counter by 1.
• decrement (function): Decrements the counter by 1.
• reset (function): Resets the counter to the initial value.
• setCount (function): Updates the counter value.

Example

import { useCounter } from "@/hooks/use-counter";

function Counter() {
  const { count, increment, decrement, reset } = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

useMousePosition

Tracks the mouse position relative to the document and a referenced element.

Type

• Position: { x: number; y: number; elementX?: number; elementY?: number; elementPositionX?: number; elementPositionY?: number }

Returns

A tuple containing:

• state (Position): Current mouse position with optional element-relative coordinates.
• ref (React.Ref): Reference to attach to an HTML element for relative positioning.

Example

import { useMousePosition } from "@/hooks/use-mouse-position";

function MouseTracker() {
  const [position, ref] = useMousePosition();

  return (
    <div ref={ref} style={{ height: "200px", border: "1px solid black" }}>
      <p>
        Mouse X: {position.x}, Y: {position.y}
      </p>
      <p>
        Element X: {position.elementX ?? "N/A"}, Y: {position.elementY ?? "N/A"}
      </p>
    </div>
  );
}

License

MIT License