This library is a curated collection of custom React hooks designed to simplify common patterns and enhance your development workflow. Built with TypeScript and modern React practices, these hooks are production-ready and thoroughly tested.

• 🎯 Type-Safe - Full TypeScript support with comprehensive type definitions;
• 🪶 Lightweight - Zero dependencies beyond React;
• 📦 Tree-Shakable - Import only what you need;
• ⚡ Performance-Optimized - Efficient implementations following React best practices;

# Using npm
npm install @g4ndy/react-hooks

# Using yarn
yarn add @g4ndy/react-hooks

# Using pnpm
pnpm add @g4ndy/react-hooks

export const DocumentVisibilityExample = () => {
  const { count, visible, onVisibilityChange } = useDocumentVisibility();
    
  useEffect(() => {
    onVisibilityChange((isVisible) => {
      console.info('First handler: ', isVisible);
    });

    const unsubscribeSecondHandler = onVisibilityChange((isVisible) => {
      console.info('Second handler: ', isVisible);
    });
        
    setTimeout(() => unsubscribeSecondHandler(), 5000);
  }, [onVisibilityChange]);

  return (
    <div>
      <span>You have left the page {count} times</span>
      <br />
      <span>
        Is the tab active? - <span>{visible ? 'yes' : 'no'}</span>
      </span>
    </div>
  );
};

• useMediaQuery - Respond to media query changes;
• useDocumentVisibility - Track document visibility and tab switching events (also has support for the MediaQuery component).

# Clone the repository
git clone https://github.com/JstUsername/react-hooks.git
cd react-hooks

# Install dependencies
npm install

# Build the library
npm run build

# Lint code
npm run lint

The library uses Vitest for unit testing hooks and Vitest Browser Mode (powered by Playwright) to ensure hooks behave correctly in real browser environments.

• npm run test — Run all tests once.
• npm run dev:test — Run tests in watch mode during development.
• npm run coverage — Generate a test coverage report in the coverage/ directory.

All tests, linting, and type-checks are automatically executed on every Push or Pull Request to the main and dev branches via GitHub Actions.

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the repository;
2. Create your feature branch (git checkout -b feature/AmazingFeature);
3. Commit your changes (git commit -m 'Add some AmazingFeature');
4. Push to the branch (git push origin feature/AmazingFeature);
5. Open a Pull Request.

Please make sure to:

• Follow the existing code style;
• Update documentation as needed;
• Follow Conventional Commits for commit messages.