🎣 React HookBox

A collection of production-ready React hooks for modern web applications. Built with TypeScript and thoroughly tested.

🚀 Features

• 📦 Tree-shakeable exports
• 💪 TypeScript support
• ⚡ Zero dependencies
• 🧪 Thoroughly tested
• 📚 Interactive demos
• 🔥 Modern browser support

📦 Installation

npm install @tmatijev/react-hookbox

📖 Tree-shaking

You can import hooks in two ways:

Method 1: Direct Import (Recommended)

Best for tree-shaking, guarantees only the specific hook code is included:

import { useLocalStorage } from "@tmatijev/react-hookbox/useLocalStorage";

Method 2: Named Import

Still tree-shakeable but depends on bundler configuration:

import { useLocalStorage, usePrevious } from "@tmatijev/react-hookbox";

The first method is recommended as it ensures the smallest possible bundle size. For example, if you only need useLocalStorage, your final bundle will only include that specific hook's code.

Available Hooks

• useLocalStorage - Stores and retrieves data from localStorage
• usePrevious - Tracks the previous value of a variable
• useFetch - Fetches data from an API with loading and error states
• useDebounce - Debounce rapidly changing values

🌲 Tree-shaking

Import hooks directly for optimal tree-shaking:

🔨 Quick Example

import { useLocalStorage } from "@tmatijev/react-hookbox";

function ProfileForm() {
  const [username, setUsername] = useLocalStorage<string>("username", "");

  return (
    <input
      value={username}
      onChange={(e) => setUsername(e.target.value)}
      placeholder="Username (persists in localStorage)"
    />
  );
}

🧪 Development

1. Clone and install:

git clone https://github.com/yourusername/react-hookbox.git
cd react-hookbox
npm install

2. Run tests:

npm test

3. Start development server:

npm run dev

Each hook has:

• TypeScript support
• Comprehensive tests
• Interactive demo
• Documentation

📚 Documentation

• API Reference
• Examples
• Contributing Guide
• Demo Application

Available Hooks

• useLocalStorage - Persist state in localStorage
• usePrevious - Access previous value of a state or prop
• useFetch - Make HTTP requests with built-in states
• useDebounce - Debounce rapidly changing values

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT © Tomislav Matijević

Built with TypeScript and tested with Jest.