v6.0.35

use-counter

Increment/decrement state within given boundaries
Import

Usage

Count: 0
import { Group, Button, Text } from '@asuikit/core';
import { useCounter } from '@asuikit/hooks';
function Demo() {
const [count, handlers] = useCounter(0, { min: 0, max: 10 });
return (
<>
<Text>Count: {count}</Text>
<Group position="center">
<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>
</Group>
</>
);
}

Definition

function useCounter(
initialValue?: number,
options?: Partial<{
min: number;
max: number;
}>
): [
number,
{
increment: () => void;
decrement: () => void;
set: (value: number) => void;
reset: () => void;
}
];