Skip to content

Commit 07c8d63

Browse files
committed
docs: README.md
1 parent db80713 commit 07c8d63

File tree

1 file changed

+99
-0
lines changed

1 file changed

+99
-0
lines changed

README.md

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<h1 align="center">
2+
React Timing Hooks
3+
</h1>
4+
5+
<h4 align="center">
6+
<p align="center">
7+
<a href="#-about">About</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
8+
<a href="#-technologies">Technologies</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
9+
<a href="#-how-to-run-the-project">Run</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
10+
<a href="#-info">Info</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
11+
<a href="#-license">License</a>
12+
</p>
13+
</h4>
14+
15+
[![npm version](https://img.shields.io/npm/v/@codedev-cyou/react-timing-hooks.svg)](https://www.npmjs.com/package/@codedev-cyou/react-timing-hooks)
16+
17+
## 🔖 About
18+
19+
**React Timing Hooks** é uma biblioteca leve que fornece dois hooks: `useDebounceState` e `useThrottleState`, para facilitar a gestão de estados que dependem de temporização. Ideal para aplicações que requerem controle preciso sobre atualizações de estado baseadas em eventos.
20+
21+
## Instalação
22+
23+
```bash
24+
npm install @codedev-cyou/react-timing-hooks
25+
```
26+
27+
ou
28+
29+
```bash
30+
yarn add @codedev-cyou/react-timing-hooks
31+
```
32+
33+
# Hooks Disponíveis
34+
35+
## useDebounceState
36+
37+
Um hook que gerencia um estado com debounce, permitindo que as atualizações sejam agrupadas após um período de inatividade.
38+
39+
```js
40+
import { useDebounceState } from "react-timing-hooks"
41+
42+
function Example() {
43+
const [debouncedValue, setDebouncedValue] = useDebounceState("", 500)
44+
45+
const handleChange = e => {
46+
setDebouncedValue(e.target.value)
47+
}
48+
49+
return <input type="text" onChange={handleChange} />
50+
}
51+
```
52+
53+
Parâmetros
54+
55+
- **initialValue**: O valor inicial do estado.
56+
- **delay**: O tempo em milissegundos para o debounce.
57+
58+
## useThrottleState
59+
60+
Um hook que gerencia um estado com throttling, permitindo que as atualizações sejam limitadas a um intervalo de tempo especificado.
61+
62+
```js
63+
import { useThrottleState } from "react-timing-hooks"
64+
65+
function Example() {
66+
const [throttledValue, setThrottledValue] = useThrottleState("", 1000)
67+
68+
const handleChange = e => {
69+
setThrottledValue(e.target.value)
70+
}
71+
72+
return <input type="text" onChange={handleChange} />
73+
}
74+
```
75+
76+
Parâmetros
77+
78+
- **initialValue**: O valor inicial do estado.
79+
- **delay**: O tempo em milissegundos para o throttling.
80+
81+
## Exemplos
82+
83+
Veja exemplos na pasta _example_.
84+
85+
## Contribuição
86+
87+
Contribuições são bem-vindas! Sinta-se à vontade para abrir issues ou pull requests.
88+
89+
- Faça um fork do projeto
90+
- Crie uma branch para sua feature (git checkout -b feature/- MinhaFeature).
91+
- Faça suas alterações e commit (git commit -m 'Adiciona nova feature').
92+
- Envie para o repositório remoto (git push origin feature/MinhaFeature).
93+
- Abra um Pull Request.
94+
95+
## 📝 License
96+
97+
[MIT](LICENSE.txt)
98+
99+
**Free Software, Hell Yeah!**

0 commit comments

Comments
 (0)