Getting Started

Getting Started

Welcome to react-hook-lab! This page will guide you through the quick and easy setup process.

🚀 Installation

You can install react-hook-lab using your favorite package manager:

# Using npm
npm install react-hook-lab

# Using yarn
yarn add react-hook-lab

# Using pnpm
pnpm add react-hook-lab

Peer Dependencies

react-hook-lab requires React 16.8+ because it relies on the standard Hooks API (useState, useEffect, etc.).

{
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
  }
}

If you're using React Native, most hooks will work seamlessly, but DOM/Browser specific hooks (like useIntersectionObserver or useClipboard) are specifically designed for web environments.

---

🛠️ Your First Hook

Importing and using a hook is incredibly straightforward. Thanks to our zero-bloat architecture, you can import exactly what you need.

import { useBoolean } from "react-hook-lab";

function App() {
  // A clean, simple way to manage a boolean state!
  const { value: isOpen, setTrue: open, setFalse: close, toggle } = useBoolean(false);

  return (
    <div>
      <button onClick={toggle}>Toggle Menu</button>
      
      {isOpen && (
        <div className="menu">
          <p>Hello from react-hook-lab!</p>
          <button onClick={close}>Close</button>
        </div>
      )}
    </div>
  );
}

---

📦 Import Paths (Advanced)

By default, everything can be imported from the root package:

import { useAsync, useDeepClone } from "react-hook-lab";

However, if you want to use our robust JavaScript utilities (which are decoupled from React entirely and can be used in Node.js backend code!), you can import them from the /utils endpoint:

import { deepClone, deepEqual } from "react-hook-lab/utils";

---

Next Step: Learn about our Core Philosophy or jump straight into the API Reference.