npm package: @g4ndy/react-hooks
Description: Several hooks created for self-education
Author: Andrey Gorchakov
Latest version: 1.5.1

# @g4ndy/react-hooks

<div align="center">

[![npm version](https://img.shields.io/npm/v/@g4ndy/react-hooks.svg)](https://www.npmjs.com/package/@g4ndy/react-hooks)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
![Coverage](https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/JstUsername/5fea402156d30ea123f857db9859a42b/raw/react-hooks-coverage.json)
[![Live Demo](https://img.shields.io/badge/demo-live-success.svg)](https://jstusername.github.io/react-hooks/)

A collection of custom React hooks created for self-education and practical use.

[NPM Package](https://www.npmjs.com/package/@g4ndy/react-hooks) • [Report Bug](https://github.com/JstUsername/react-hooks/issues) • [Request Feature](https://github.com/JstUsername/react-hooks/issues) • [Live Demo](https://jstusername.github.io/react-hooks/)

</div>

---

## 📚 About

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.

## ✨ Features

- 🎯 **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;

## 📦 Installation

```bash
# Using npm
npm install @g4ndy/react-hooks

# Using yarn
yarn add @g4ndy/react-hooks

# Using pnpm
pnpm add @g4ndy/react-hooks
```

## 🚀 Quick Start

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

## 📚 Available Hooks

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

## 🛠️ Development

```bash
# 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
```

## 🧪 Testing

The library uses [Vitest](https://vitest.dev/) for unit testing hooks and [Vitest Browser Mode](https://vitest.dev/guide/browser.html) (powered by Playwright) to ensure hooks behave correctly in real browser environments.

### Test Commands
- `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.

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

## 📝 Contributing

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](https://www.conventionalcommits.org/) for commit messages.