Getting Started

Let's add a useBoolean hook to your React project:

Step 1: Run the CLI

npx react-usekit@latest init

Step 2: Follow the Interactive Prompts

? What would you like to add? › hooks
? Choose language: › TypeScript
? Enter relative directory to place files (default: src/hooks): src/hooks
? Select hooks to add: › ◉ useBoolean
                         ◯ useClickOutside

✅ Hook 'useBoolean' added to src/hooks

Step 3: Use It in Your Component

import { useBoolean } from "./src/hooks/useBoolean";

function ToggleExample() {
  const { value: isVisible, toggle, setTrue, setFalse } = useBoolean(false);

  return (
    <div>
      <button onClick={toggle}>{isVisible ? "Hide" : "Show"} Content</button>

      {isVisible && (
        <div>
          <p>This content is toggleable!</p>
          <button onClick={setFalse}>Hide</button>
        </div>
      )}
    </div>
  );
}

Available Hooks & Utilities

Hooks

• useBoolean - A custom hook that manages a boolean state.
• useDebounceValue - A custom hook that debounces a value.
• useDebounceFun - A custom hook that debounces a function.
• useClickOutside - Custom hook to detect clicks outside the element.
• useIsomorphicLayoutEffect - A custom hook that provides a cross-platform compatible useLayoutEffect.
• useInterval - A custom hook that sets up an interval to call a callback function at specified intervals.
• useTimeout - A custom hook that sets up an timeout to call a callback function at specified intervals.
• useEventListener - A custom hook that adds an event listener to a specified element or the window.
• useIsMobile - A custom hook that manages a boolean state.
• useLocalStorage - A custom hook that manages state synchronized with localStorage.

Utils

• capitalize - Capitalize the first letter of a string.
• formatCurrency - Format a number as currency with locale support.
• isEmpty - Check if a value is empty (null, undefined, empty string, array, or object).
• truncateText - Truncate text to a maximum length with ellipsis.
• formatDate - Format a date with locale support.
• slugify - Convert a string to a URL-friendly slug.
• generateId - Generate unique identifiers for various use cases.
• deepClone - Create a deep copy of objects and arrays, handling nested structures safely.
• isURLValid - Check if a string is a valid URL.