ReactUseKit

Installation

How to install and use ReactUseKit hooks and helpers in your project

CLI Installation

Use the shadcn CLI to quickly install hooks and helpers

pnpm dlx shadcn@latest add https://reactusekit.dev/r/[hooks/helper-name].json

Copy Paste

  1. Browse to the hook or helper documentation page
  2. Copy the source code
  3. Create a new file in your project:
    • Hooks: src/hooks/[hook-name].ts
    • Helpers: src/lib/[helper-name].ts
  4. Paste the code and save

Usage

Hooks

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

function MyComponent() {
  const { value, toggle } = useBoolean(false);

  return <button onClick={toggle}>{value ? "ON" : "OFF"}</button>;
}

Helpers

import { capitalize } from "@/lib/capitalize";

function Example() {
  return <h1>{capitalize("hello world")}</h1>;
}

Introduction

ReactUseKit - A collection of reusable React hooks and helpers

useBoolean

A custom hook that manages a boolean state.