use-counter
Increments/decrements state within given boundaries
Import
Source
Docs
Package
Usage
Count: 0
import { Group, Button, Text } from '@mantine/core';
import { useCounter } from '@mantine/hooks';
function Demo() {
const [count, handlers] = useCounter(0, { min: 0, max: 10 });
return (
<>
<Text>Count: {count}</Text>
<Group justify="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;
},
];
Welcome to Mantine, React components library that you always wished for
Build fully functional accessible web applications faster than ever