useCounter

Gestiona un contador con funciones para incrementar/decrementar.

Carácteristicas

Reiniciar el contador al valor inicial.
Establece valores mínimo y máximo al contador.
Establecer el contador a un valor determinado.
Ejecutar una función cuando el contador alcance el valor mínimo o máximo.

Instalación

npm i @raddix/use-counter

Uso

Contador básico

Para empezar crearemos un contador con posibilidad de incrementarlo y disminuirlo en 1, y restablecerlo al valor inicial.

import { useCounter } from '@raddix/use-counter';

const Counter = () => {
  const [counter, { inc, dec, reset }] = useCounter(0);

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={() => inc()}>Increment</button>
      <button onClick={() => dec()}>Decrement</button>
      <button onClick={() => reset()}>Reset</button>
    </div>
  );
};

Agregar un valor mínimo y máximo

Ahora, agregaremos un valor mínimo y máximo al contador y ejecutaremos una función. cuando el contador alcanza el valor mínimo o máximo.

import { useCounter } from '@raddix/use-counter';

const Counter = () => {
  const [counter, { inc, dec, reset }] = useCounter(0, {
    min: 0,
    max: 10,
    onMin: () => console.log('Counter reached the minimum value'),
    onMax: () => console.log('Counter reached the maximum value')
  });

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={() => inc()}>Increment</button>
      <button onClick={() => dec()}>Decrement</button>
      <button onClick={() => reset()}>Reset</button>
    </div>
  );
};

API

Valor de retorno

El hook useCounter devuelve un array con dos elementos:

Index	Description	Type
0 (counter)	El valor actual del contador.	number
1 (actions)	Un objeto con las acciones para manejar el contador.	object

Acciones

Name	Description	Type
inc	Incrementa el contador, por defecto en 1.	(value?: number) => void
dec	Decrementa el contador, por defecto en 1.	(value?: number) => void
reset	Resetea el contador al valor inicial.	() => void
set	Establece el contador a un valor específico.	(value: number) => void

Parámetros

El hook useCounter acepta dos parámetros:

Name	Description	Type
initialValue	El valor inicial del contador.	number
options	Un objeto con las opciones del contador.	object

Opciones del contador

Name	Description	Type
min	El valor mínimo del contador.	number
max	El valor máximo del contador.	number
onMin	Función a ejecutar cuando el contador alcanza el valor mínimo.	() => void
onMax	Función a ejecutar cuando el contador alcanza el valor máximo.	() => void