Step-by-step guide to install and configure OpenHooks CLI for your React projects.

Installation Guide

Get OpenHooks up and running in your React project with our simple CLI tool.

📋 Prerequisites

Before installing OpenHooks, make sure you have:

Node.js 18.0.0 or higher
npm, yarn, or pnpm package manager
A React project (16.8+ with hooks support)

OpenHooks works with any React framework: Create React App, Next.js, Vite, Remix, and more.

🚀 Quick Installation

Install the CLI Globally

npm install -g open-hook

yarn global add open-hook

pnpm add -g open-hook

Verify Installation

open-hook --version

You should see the current version number displayed.

Initialize Your Project

Navigate to your React project and run:

open-hook init

This creates a configuration file and sets up the hooks directory structure.

Install Your First Hook

open-hook add useClickOutside

The hook will be downloaded and ready to use in your project!

⚙️ Configuration

When you run open-hook init, it creates a .openhook.json configuration file:

.openhook.json

{
  "language": "ts",
  "hooksDir": "./hooks",
  "repoUrl": "https://api.github.com/repos/Rajeshkumar02/OpenHooks"
}

Configuration Options

Option	Description	Default	Options
`language`	Preferred language for hooks	`"ts"`	`"ts"` \| `"js"`
`hooksDir`	Directory to install hooks	`"./hooks"`	Any valid path
`repoUrl`	Source repository URL	Official OpenHooks repo	Any compatible repo

You can modify these settings anytime by editing the .openhook.json file or running open-hook init again.

📦 CLI Commands

`open-hook init`

Initialize OpenHooks in your project

open-hook init

`open-hook add [hooks...]`

Install one or more hooks

# Install a single hook
open-hook add useClickOutside

# Install multiple hooks
open-hook add useClickOutside useDebounce useLocalStorage

# Install with specific language
open-hook add useClickOutside --language js

# Install to specific directory
open-hook add useClickOutside --dir ./src/hooks

`open-hook list`

View all available hooks

open-hook list

`open-hook --help`

Show help information

open-hook --help

🏗️ Project Structure

After installation, your project structure will look like this:

your-react-project/
├── .openhook.json          # Configuration file
├── hooks/                  # Hooks directory
│   ├── manifest.json      # Installed hooks metadata
│   ├── useClickOutside.ts  # Your installed hooks
│   └── useDebounce.ts
├── src/
│   └── components/
│       └── MyComponent.tsx # Use hooks here
└── package.json

🔧 Framework-Specific Setup

Next.js

OpenHooks works out of the box with Next.js. No additional configuration needed.

components/Modal.tsx

import { useClickOutside } from "../hooks/useClickOutside";

export default function Modal() {
  // Use your hook here
}

Create React App

Works seamlessly with CRA. Import hooks from the relative path:

src/components/Modal.tsx

import { useClickOutside } from "../hooks/useClickOutside";

export default function Modal() {
  // Use your hook here
}

Vite

Perfect compatibility with Vite. No additional setup required.

src/components/Modal.tsx

import { useClickOutside } from "../hooks/useClickOutside";

export default function Modal() {
  // Use your hook here
}

TypeScript Projects

OpenHooks provides full TypeScript support:

import { useClickOutside } from "./hooks/useClickOutside";

// Full type safety and IntelliSense support
const ref = useRef<HTMLDivElement>(null);
useClickOutside(ref, () => console.log("Clicked outside!"));

🔄 Updating Hooks

To update to the latest version of hooks:

Update the CLI:
```
npm update -g open-hook
```
Reinstall hooks (they'll be updated automatically):
```
open-hook add useClickOutside
```

The CLI will prompt you if a newer version of an existing hook is available.

🚨 Troubleshooting

Common Issues

Issue: open-hook: command not found
Solution: Make sure you installed the CLI globally and restart your terminal.

Issue: Permission denied during global installation
Solution: Use sudo on macOS/Linux or run as administrator on Windows.

Issue: Hooks not found after installation
Solution: Check the hooksDir path in your .openhook.json file.

Issue: TypeScript errors with imported hooks
Solution: Ensure your tsconfig.json includes the hooks directory.

Getting Help

📖 Check our documentation
🐛 Report issues on GitHub
💬 Join our community discussions

✅ Verification

After installation, verify everything works:

test-component.tsx

import { useRef, useState } from "react";
import { useClickOutside } from "./hooks/useClickOutside";

function TestComponent() {
  const ref = useRef<HTMLDivElement>(null);
  const [isOpen, setIsOpen] = useState(false);

  useClickOutside(ref, () => setIsOpen(false));

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {isOpen && (
        <div ref={ref} style={{ padding: "20px", background: "#f0f0f0" }}>
          Click outside to close this modal
        </div>
      )}
    </div>
  );
}

🎉 Congratulations! You've successfully installed OpenHooks. Ready to explore our hook collection?

Installation

On this page