Introduction

Welcome to Light Hooks Documentation! This is the comprehensive guide for light-hooks, a powerful collection of lightweight and efficient React hooks designed to simplify common patterns in modern React applications.

About Light Hooks

Light Hooks is proudly open-source! 🎉 We believe in creating accessible, performant, and easy-to-use React hooks that help developers build better applications faster.

Why Light Hooks?

Light Hooks is more than just a hook library. It's a carefully curated collection designed for modern React development. Key benefits include:

• Markdown & MDX Support: Easily write documentation in Markdown, with the option to include interactive components via MDX.
• Lightweight & Performant: Minimal bundle impact with maximum functionality.
• TypeScript Support: Full TypeScript support with comprehensive type definitions.
• Zero Dependencies: Pure React hooks with no external dependencies.
• Tree Shakable: Import only what you need for optimal bundle size.

Available Hooks

Installation & Usage

Light Hooks is designed for modern React applications and supports the latest React features:

• React 16.8+ - Hooks support required.
• TypeScript - Full type safety and IntelliSense support.
• ES Modules - Modern module system with tree shaking.
• SSR Compatible - Works with Next.js, Gatsby, and other SSR frameworks.

Quick Start

Install light-hooks in your React project:

npm install light-hooks
# or
yarn add light-hooks
# or
pnpm add light-hooks

Start using hooks immediately:

import { useCountdown, usePing, useClickOutside, isMobile } from "light-hooks";

function MyComponent() {
  const { timeLeft, start, pause, isActive } = useCountdown(60);
  const { latency, isLive } = usePing("https://api.example.com");
  const modalRef = useRef(null);
  const mobile = isMobile();

  useClickOutside(modalRef, () => {
    console.log("Clicked outside modal");
  });

  return (
    <div>
      <div>
        <h3>Timer: {timeLeft}s</h3>
        <button onClick={isActive ? pause : start}>
          {isActive ? "Pause" : "Start"}
        </button>
      </div>
      <div>
        <h3>Network Status</h3>
        <p>API: {isLive ? `Online (${latency}ms)` : "Offline"}</p>
      </div>
      <div ref={modalRef} className={mobile ? "mobile-view" : "desktop-view"}>
        <p>Device: {mobile ? "Mobile" : "Desktop"}</p>
      </div>
    </div>
  );
}

Get the Package

Get started with light-hooks from npm: