useToggle

Hook for switching between two status values

Import: import { useToggle } from '@kubed/hooks;'

Source: View source code

Docs: Edit this page

npm: @kubed/hooks

Usage

useToggle Hook for switching between two state values

import { useToggle } from '@kubed/hooks';
import { Button } from '@kubed/components'

export default function App() {
const [value, toggle] = useToggle('light', ['light', 'dark']);
   return (
     <div>
       <p>themeType: {`${value}`}</p>
       <Group spacing="xl">
         <Button onClick={() => toggle()}>toggle</Button>
         <Button onClick={() => toggle('light')}>Set light</Button>
         <Button onClick={() => toggle('dark')}>Set dark</Button>
       </Group>
     </div>
   );
}

1
import { useToggle } from '@kubed/hooks';
2
import { Button } from '@kubed/components'
3

4
export default function App() {
5
const [value, toggle] = useToggle('light', ['light', 'dark']);
6
   return (
7
     <div>
8
       <p>themeType: {`${value}`}</p>
9
       <Group spacing="xl">
10
         <Button onClick={() => toggle()}>toggle</Button>
11
         <Button onClick={() => toggle('light')}>Set light</Button>
12
         <Button onClick={() => toggle('dark')}>Set dark</Button>
13
       </Group>
14
     </div>
15
   );
16
}
17

18

useBooleanToggle Hook for switching between true and false values

import { useBooleanToggle } from '@kubed/hooks';
import { Button } from '@kubed/components'

export default function App() {
const [value, toggle] = useBooleanToggle();
   return (
     <div>
       <p>state：{`${value}`}</p>
       <Group spacing="xl">
         <Button onClick={() => toggle()}>change</Button>
         <Button onClick={() => toggle(false)}>Set false</Button>
         <Button onClick={() => toggle(true)}>Set true</Button>
       </Group>
     </div>
   );
}

1
import { useBooleanToggle } from '@kubed/hooks';
2
import { Button } from '@kubed/components'
3

4
export default function App() {
5
const [value, toggle] = useBooleanToggle();
6
   return (
7
     <div>
8
       <p>state：{`${value}`}</p>
9
       <Group spacing="xl">
10
         <Button onClick={() => toggle()}>change</Button>
11
         <Button onClick={() => toggle(false)}>Set false</Button>
12
         <Button onClick={() => toggle(true)}>Set true</Button>
13
       </Group>
14
     </div>
15
   );
16
}
17

18

API

The useToggle hook accepts two parameters:

initialValue – initial value
options – two options for switching

Hook returns the new value after the switch and the function used to switch.

1
function useToggle<T>(
2
initialValue: T, options: [T, T]
3
): readonly [T, (value?: React.SetStateAction<T>) => void]

Params

Parameters	Default Value	Type	Description
initialValue	-	`T`	initial value
generateId	-	`[T, T]`	Two options for switching

Result

Parameters	Default Value	Type	Description
state	-	`T`	Value after switching
toggle	-	`React.SetStateAction<T>`	Toggle value