v4.2.12

use-toggle

Switch between two states
Import
Source
View source code
Docs
Edit this page
Package
@mantine/hooks

Usage

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

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


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


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

API

Hook accepts two arguments:

  • initialValue – initial state
  • options – an array with 2 elements, must include initial value

Hook returns an array with state value and toggle function:

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


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'

TypeScript

Set type

By default, TypeScript will guess your type, but in most cases it's better to set type manually:

const [value, toggle] = useToggle('dark', ['light', 'dark']); // value is string
const [value, toggle] = useToggle<'dark' | 'light'>('dark', ['light', 'dark']); // value is 'dark' | 'light'

Definition

function useToggle<T>(
  initialValue: T,
  options: [T, T]
): readonly [T, (value?: React.SetStateAction<T>) => void];
Go back
use-set-state – @mantine/hooks
Up next
use-uncontrolled – @mantine/hooks
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
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