use-counter

Increment/decrement state within given boundaries
Import
Source
View source code
Docs
Edit this page
Package
@mantine/hooks

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 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;
  }
];
Go back
Usage with Vite – Guides
Up next
use-debounced-state – @mantine/hooks
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter