React Timing Hooks

About   |    Technologies   |    Run   |    Info   |    License

🔖 About

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.

Instalação

npm install @codedev-cyou/react-timing-hooks

ou

yarn add @codedev-cyou/react-timing-hooks

Hooks Disponíveis

useDebounceState

Um hook que gerencia um estado com debounce, permitindo que as atualizações sejam agrupadas após um período de inatividade.

import { useDebounceState } from "react-timing-hooks"

function Example() {
  const [debouncedValue, setDebouncedValue] = useDebounceState("", 500)

  const handleChange = e => {
    setDebouncedValue(e.target.value)
  }

  return <input type="text" onChange={handleChange} />
}

Parâmetros

• initialValue: O valor inicial do estado.
• delay: O tempo em milissegundos para o debounce.

useThrottleState

Um hook que gerencia um estado com throttling, permitindo que as atualizações sejam limitadas a um intervalo de tempo especificado.

import { useThrottleState } from "react-timing-hooks"

function Example() {
  const [throttledValue, setThrottledValue] = useThrottleState("", 1000)

  const handleChange = e => {
    setThrottledValue(e.target.value)
  }

  return <input type="text" onChange={handleChange} />
}

Parâmetros

• initialValue: O valor inicial do estado.
• delay: O tempo em milissegundos para o throttling.

Funções Disponíveis

debounce

Uma função que gerencia outra função com debounce, permitindo que as atualizações sejam agrupadas depois de um período de inatividade.

import { debounce } from "react-timing-hooks"

function Example() {
  const [debouncedValue, setDebouncedValue] = useState("")

  const debouncedFunction = debounce((newValue: string) => {
    setDebouncedValue(newValue)
  }, 1000)

  const handleChange = e => {
    debouncedFunction(e.target.value)
  }

  return <input type="text" onChange={handleChange} />
}

Parâmetros

• function: Função a ser debounced.
• delay: O tempo em milissegundos para o debounce.

throttle

Uma função que gerencia outra função com throttling, permitindo que as atualizações sejam limitadas a um intervalo de tempo especificado.

import { throttle } from "react-timing-hooks"

function Example() {
  const [throttledValue, setThrottledValue] = useState("")

  const throttledFunction = React.useCallback(
    throttle((newValue: string) => {
      setThrottledValue(newValue)
    }, 2000),
    [],
  )

  const handleChange = e => {
    throttledFunction(e.target.value)
  }

  return <input type="text" onChange={handleChange} />
}

Parâmetros

• function: Função a ser throttled.
• delay: O tempo em milissegundos para o throttling.

Exemplos

Veja exemplos na pasta example.

Contribuição

Contribuições são bem-vindas! Sinta-se à vontade para abrir issues ou pull requests.

• Faça um fork do projeto
• Crie uma branch para sua feature (git checkout -b feature/- MinhaFeature).
• Faça suas alterações e commit (git commit -m 'Adiciona nova feature').
• Envie para o repositório remoto (git push origin feature/MinhaFeature).
• Abra um Pull Request.

📝 License

MIT

Free Software, Hell Yeah!