Installation

How to install and use notehooks in your React project.

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

Package Installation

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

Step 1: Install the Package

Install notehooks using your preferred package manager:

npm install notehooks

Or with yarn:

yarn add notehooks

Or with pnpm:

pnpm add notehooks

Step 2: Import and Use Hooks

Start using hooks in your React components:

import { useLocalStorage, useToggle, useCounter } from 'notehooks';

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>
  );
}

Step 3: TypeScript Support (Optional)

noteHooks includes full TypeScript support out of the box:

import { useLocalStorage } from 'notehooks';

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

Step 4: Start Building Amazing Apps

You're all set! Start using notehooks to enhance your React applications:

// Example: Persistent theme switcher
import { useLocalStorage } from 'notehooks';

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 'notehooks';

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>
  );
}

Debounced Search

import { useDebounce } from 'notehooks';
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 notehooks, you're ready to start building! Here are some next steps:

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

Quick Integration

Here's how to quickly integrate notehooks 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 notehooks!

Notehooks