use-counterIncrement/decrement state within given boundariesImportimport { useCounter } from '@mantine/hooks';SourceView source codeDocsDownload more icon variants from https://tabler-icons.io/i/pencilEdit this pagePackage@mantine/hooksUsageCount: 0IncrementDecrementResetSet 5import { 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 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> </> );}Definitionfunction useCounter( initialValue?: number, options?: Partial<{ min: number; max: number; }>): [ number, { increment: () => void; decrement: () => void; set: (value: number) => void; reset: () => void; }];Download more icon variants from https://tabler-icons.io/i/arrow-leftGo backUsage with Vite – GuidesUp nextuse-debounced-state – @mantine/hooksDownload more icon variants from https://tabler-icons.io/i/arrow-rightDownload more icon variants from https://tabler-icons.io/i/listTable of contentsUsageDefinitionBuild fully functional accessible web applications faster than everAboutContributeAbout MantineChangelogReleasesCommunityChat on DiscordFollow on TwitterFollow on GithubGitHub discussionsProjectMantine UIDocumentationGithub organizationnpm organizationBuilt by Vitaly Rtishchev and these awesome peopleJoin Discord communityFollow Mantine on Twitter