useCounter
Increments/decrements state within given range
Usage
import { useCounter } from 'hook-master-react';
function Demo() {
const [count, handlers] = useCounter(0, { min: 0, max: 10 });
return (
<>
<div>Count: {count}</div>
<div classname="flex justify-center gap-1">
<button onClick={handlers.increment}>Increment</button>
<button onClick={handlers.decrement}>Decrement</button>
<button onClick={handlers.reset}>Reset</button>
<button onClick={() => handlers.set(5)}>Set 5</button>
</div>
</>
);
}
Definition
function useCounter(
initialValue?: number,
options?: Partial<{
min: number;
max: number;
}>
): [
number,
{
increment: () => void;
incrementBy: (value: number) => void;
decrement: () => void;
decrementBy: (value: number) => void;
set: (value: number) => void;
reset: () => void;
},
];