🚀 We’re actively developing new and unique custom hooks for React! Contribute on GitHub

Installation

How to install and use light-hooks in your React project.

Installing light-hooks is simple and straightforward. The package is available on npm and can be installed using any package manager. Light Hooks works with React version 16.8 or higher (hooks support required).

Package Installation

Light Hooks can be installed directly from npm using your preferred package manager.

1
Step 1: Install the Package

Install light-hooks using your preferred package manager:

npm install light-hooks

Or with yarn:

yarn add light-hooks

Or with pnpm:

pnpm add light-hooks
2
Step 2: Import and Use Hooks

Start using hooks in your React components:

import { useLocalStorage, useToggle, useCounter } from 'light-hooks';

function MyComponent() {
  const [count, { increment, decrement, reset }] = useCounter(0);
  const [isVisible, toggle] = useToggle(false);
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  
  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
      
      <button onClick={toggle}>
        {isVisible ? 'Hide' : 'Show'} Content
      </button>
      
      {isVisible && <p>This content is toggleable!</p>}
      
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Current theme: {theme}
      </button>
    </div>
  );
}
3
Step 3: TypeScript Support (Optional)

Light Hooks includes full TypeScript support out of the box:

TypeScript Ready:

All hooks come with comprehensive TypeScript definitions. No additional @types packages needed!

import { useLocalStorage } from 'light-hooks';

// Type is automatically inferred as [string, (value: string) => void]
const [name, setName] = useLocalStorage('username', 'Anonymous');
4
Step 4: Start Building Amazing Apps

You're all set! Start using light-hooks to enhance your React applications:

// Example: Persistent theme switcher
import { useLocalStorage } from 'light-hooks';

function ThemeProvider({ children }) {
  const [theme, setTheme] = useLocalStorage('app-theme', 'light');
  
  return (
    <div className={`theme-${theme}`}>
      {children}
    </div>
  );
}

Quick Examples

Here are some quick examples to get you started with common use cases:

Local Storage Hook

import { useLocalStorage } from 'light-hooks';

function Settings() {
  const [settings, setSettings] = useLocalStorage('user-settings', {
    theme: 'light',
    language: 'en'
  });

  return (
    <div>
      <select 
        value={settings.theme} 
        onChange={(e) => setSettings({...settings, theme: e.target.value})}
      >
        <option value="light">Light</option>
        <option value="dark">Dark</option>
      </select>
    </div>
  );
}

import { useDebounce } from 'light-hooks';
import { useState, useEffect } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 500);

  useEffect(() => {
    if (debouncedQuery) {
      // Perform search with debounced query
      console.log('Searching for:', debouncedQuery);
    }
  }, [debouncedQuery]);

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search..."
    />
  );
}

Getting Started

Once you've installed light-hooks, you're ready to start building! Here are some next steps:

  1. Explore the hooks: Check out the documentation for each hook to understand their APIs
  2. Start with common patterns: Try useLocalStorage for persistent state or useToggle for boolean flags
  3. Build incrementally: Add hooks to existing components to simplify your code

Quick Integration

Here's how to quickly integrate light-hooks into an existing React project:

// Replace this common pattern:
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);

// With this simple hook:
const [isOpen, toggle] = useToggle(false);

You're all set to start building amazing applications with light-hooks!