# webixu-react-hooks

> Collection of React hooks

Latest version **1.0.5** (published 2023-06-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install webixu-react-hooks
pnpm add webixu-react-hooks
yarn add webixu-react-hooks
bun add webixu-react-hooks
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2023-06-04 |
| First published | 2023-05-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 26.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jaak Kivinukk |
| Maintainers | jaakal |

## Links

- npm: https://www.npmjs.com/package/webixu-react-hooks
- Repository: https://github.com/Jaakal/webixu-react-hooks
- Homepage: https://github.com/Jaakal/webixu-react-hooks#readme
- Issues: https://github.com/Jaakal/webixu-react-hooks/issues
- npm.io page: https://npm.io/package/webixu-react-hooks

## Dependencies (1)

- [webixu-react-utils](https://npm.io/package/webixu-react-utils.md) ^1.0.1

## Recent versions

- 1.0.5 (latest) — 2023-06-04
- 1.0.4 — 2023-06-04
- 1.0.3 — 2023-06-03
- 1.0.2 — 2023-06-03
- 1.0.1 — 2023-06-03
- 1.0.0 — 2023-05-03

## README

# Webixu React Hooks

[![npm version](https://badge.fury.io/js/webixu-react-hooks.svg)](https://www.npmjs.com/package/webixu-react-hooks)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

This repository contains a collection of custom React hooks that can be used to simplify and enhance the development of React applications.

## Installation

You can install Webixu React Hooks using npm:

```bash
npm install webixu-react-hooks
```

## Usage

To use Webixu React Hooks, simply import the hooks you need into your project:

```typescript
import { useForceRender } from 'webixu-react-hooks';
```

## Available Hooks

### <span style="color: #228B22;">useForceRender</span>

A custom hook that returns a function to force a component to re-render. This can be useful in cases where a component needs to update its rendering without any changes to its props or state.

Example usage:

```tsx
import { useCallback } from 'react';
import { useForceRender } from 'webixu-react-hooks';

type Props = {};

const MyComponent = (): React.FunctionComponent<Props> => {
  const forceRender = useForceRender();

  const handleClick = useCallback(() => {
    // Call the forceRender function to trigger a re-render of the component
    forceRender();
  }, []);

  return (
    <div>
      <button onClick={handleClick}>Force re-render</button>
    </div>
  );
};
```

### <span style="color: #228B22;">useRefs</span>

A custom hook that returns an object with refs to multiple elements. This can be useful in cases where a component needs to reference multiple elements and track their state.

Example usage:

```tsx
import { useCallback } from 'react';
import { useRefs } from 'webixu-react-hooks';

type Refs = {
  element: HTMLDivElement;
  input: HTMLInputElement;
};

type Props = {};

const MyComponent: React.FunctionComponent<Props> = () => {
  const refs = useRefs<Refs>();

  const handleClick = useCallback(() => {
    refs.input.current?.focus();
  }, []);

  return (
    <div ref={refs.element}>
      <input type='text' ref={refs.input} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

export default MyComponent;
```

### <span style="color: #228B22;">useRenderCounter</span>

A custom hook that logs the number of times a component is rendered. This can be useful in cases where a component is re-rendering too often and you want to optimize its performance.

Example usage:

```tsx
import { useRenderCounter } from 'webixu-react-hooks';

type Props = {};

const MyComponent: React.FunctionComponent<Props> = () => {
  useRenderCounter('MyComponent');

  return (
    <div>
      <p>Hello, world!</p>
    </div>
  );
};

export default MyComponent;
```

## License

This project is licensed under the terms of the MIT license. See the [LICENSE](LICENSE) file for details.

---
_Source: https://npm.io/package/webixu-react-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._