useCounter

useCounter es un Hook de React que te permite gestionar el estado de un contador numérico con funciones para incrementar, decrementar y restablecer su valor. Opcionalmente, puedes proporcionar valores mínimo y máximo para limitar el rango del contador.

Interfaz

function useCounter(
  initialValue: number = 0,
  options?: UseCounterOptions
): UseCounterReturn;

Parámetros

• initialValuenumber
  

  Valor inicial del contador. El valor predeterminado es 0.

• optionsUseCounterOptions
  

  Las opciones del contador.

  • options.minnumber
    

    Valor mínimo que puede alcanzar el contador. Si no lo proporcionas, no hay límite inferior.

  • options.maxnumber
    

    Valor máximo que puede alcanzar el contador. Si no lo proporcionas, no hay límite superior.

  • options.stepnumber · 1
    

    Cantidad que puedes sumar o restar. El valor predeterminado es 1.

Valor de retorno

• UseCounterReturn
  

  Un objeto con el valor del contador y las funciones de control.

  • countnumber
    

    El valor actual del contador.

  • increment() => void
    

    Una función para incrementar el contador.

  • decrement() => void
    

    Una función para decrementar el contador.

  • reset() => void
    

    Una función para restablecer el contador a su valor inicial.

  • setCount(value: number | ((prev: number) => number)) => void
    

    Una función para actualizar el contador con un valor específico o con una función que devuelve un nuevo valor.

Ejemplo

import { useCounter } from 'react-simplikit';

function ShoppingCart() {
  const { count, increment, decrement, reset } = useCounter(1, {
    min: 1,
    max: 10,
  });

  return (
    <div>
      <span>Cantidad: {count}</span>
      <button type="button" onClick={decrement}>
        -
      </button>
      <button type="button" onClick={increment}>
        +
      </button>
      <button type="button" onClick={reset}>
        Restablecer
      </button>
    </div>
  );
}