Blife UI

¿Qué hace?

Simplifica el manejo de valores numéricos con límites automáticos. Define mínimo y máximo, y el hook respeta esos límites automáticamente.

Importación

import { useCounter } from "@blifedesarrollo/hooks";

Uso básico

function Counter() {
  const [count, { increment, decrement, set, reset }] = useCounter(5, { min: 0, max: 10 });
 
  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
      <button onClick={() => set(0)}>Reset a 0</button>
      <button onClick={reset}>Reset inicial</button>
    </div>
  );
}

Cómo funciona:

Retorna [valor, { increment, decrement, set, reset }]
increment() y decrement() cambian el valor en 1
set(valor) establece un valor específico
reset() vuelve al valor inicial
Todos los valores se ajustan automáticamente a los límites min y max

Ejemplos comunes

Contador con límites

function BoundedCounter() {
  const [count, { increment, decrement, set, reset }] = useCounter(5, {
    min: 0, // No puede bajar de 0
    max: 10, // No puede subir de 10
  });
 
  return (
    <div>
      <p>Valor: {count}</p>
      <button onClick={decrement} disabled={count <= 0}>
        -
      </button>
      <button onClick={increment} disabled={count >= 10}>
        +
      </button>
      <button onClick={() => set(count + 5)}>+5</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

Solo con mínimo (no negativos)

const [count, { increment, decrement }] = useCounter(0, {
  min: 0, // No permite valores negativos
});

Solo con máximo

const [count, handlers] = useCounter(50, {
  max: 100, // No puede pasar de 100
});

Sin límites

const [count, handlers] = useCounter(10); // Sin límites (default)
const [count, handlers] = useCounter(); // Inicia en 0

Ejemplos prácticos

Control de cantidad en carrito

function ProductQuantity({ product, onQuantityChange }) {
  const [quantity, { increment, decrement, set }] = useCounter(1, {
    min: 1,
    max: product.stock || 99,
  });
 
  useEffect(() => {
    onQuantityChange(quantity);
  }, [quantity, onQuantityChange]);
 
  return (
    <div>
      <button onClick={decrement} disabled={quantity <= 1}>
        -
      </button>
      <input
        type="number"
        value={quantity}
        onChange={(e) => set(parseInt(e.target.value) || 1)}
        min={1}
        max={product.stock}
      />
      <button onClick={increment} disabled={quantity >= product.stock}>
        +
      </button>
    </div>
  );
}

Paginación

function usePagination(totalItems, itemsPerPage = 10) {
  const totalPages = Math.ceil(totalItems / itemsPerPage);
 
  const [
    currentPage,
    { increment: nextPage, decrement: prevPage, set: goToPage, reset: goToFirst },
  ] = useCounter(1, {
    min: 1,
    max: totalPages,
  });
 
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = Math.min(startIndex + itemsPerPage, totalItems);
 
  return {
    currentPage,
    totalPages,
    nextPage,
    prevPage,
    goToPage,
    goToFirst,
    goToLast: () => goToPage(totalPages),
    startIndex,
    endIndex,
    hasNextPage: currentPage < totalPages,
    hasPrevPage: currentPage > 1,
  };
}

API

Parámetros

Parámetro	Tipo	Requerido	Default	Descripción
`initialValue`	`number`	No	`0`	Valor inicial del contador
`options.min`	`number`	No	`-Infinity`	Valor mínimo permitido
`options.max`	`number`	No	`Infinity`	Valor máximo permitido

Retorno

Retorna un array con dos elementos:

const [count, { increment, decrement, set, reset }] = useCounter(initialValue, options);

Elemento	Tipo	Descripción
`count`	`number`	Valor actual del contador
`increment`	`() => void`	Incrementa en 1 (respeta `max`)
`decrement`	`() => void`	Decrementa en 1 (respeta `min`)
`set`	`(value: number) => void`	Establece un valor (se ajusta a límites)
`reset`	`() => void`	Resetea al valor inicial

Comportamiento de límites:

set(15) con max: 10 → el valor será 10
set(-5) con min: 0 → el valor será 0
increment() cuando count === max → no cambia
decrement() cuando count === min → no cambia

💡 Casos de uso comunes

Cantidad de productos → Control de stock en carrito
Paginación → Navegación entre páginas
Contadores de votos → Likes, dislikes, ratings
Sliders y controles → Valores numéricos con límites
Temporizadores → Contadores de tiempo con límites

use-counter