Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

use-toggle

Switches between given values

Import

Source

View source code

Docs

Edit this page

Package

@mantine/hooks

Usage

use-toggle implements a common state pattern – it switches state between given values:

import { Button } from '@mantine/core';
import { useToggle } from '@mantine/hooks';

function Demo() {
  const [value, toggle] = useToggle(['blue', 'orange', 'cyan', 'teal']);

  return (
    <Button color={value} onClick={() => toggle()}>
      {value}
    </Button>
  );
}

API

The hook accepts an array as single argument, the first option will be used as the default value.

The hook returns an array with state value and toggle function:

import { useToggle } from '@mantine/hooks';

const [value, toggle] = useToggle(['light', 'dark'] as const);

toggle(); // -> value == 'light'
toggle(); // -> value == 'dark'

// You can force specific value, in this case state will be set to given value
toggle('dark'); // -> value == 'dark'

If you do not provide an array with options, then use-toggle will use boolean values with false as default:

import { useToggle } from '@mantine/hooks';

const [value, toggle] = useToggle();
// -> value === false
toggle(); // -> value === true

Set type

By default, TypeScript will guess your type, but in most cases it's better to use const assertion to prevent type widening:

import { useToggle } from '@mantine/hooks';

useToggle(['light', 'dark']); // value is string
useToggle(['light', 'dark'] as const); // value is 'dark' | 'light'
useToggle<'dark' | 'light'>(['light', 'dark']); // same as above

Definition

function useToggle<T = boolean>(
  options?: readonly T[]
): readonly [T, (value?: React.SetStateAction<T>) => void];

Previous

use-throttled-value

Next

use-uncontrolled

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on XFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people