useToggle

用于在两个状态值间切换的 Hook

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

Source: View source code

Docs: Edit this page

npm: @kubed/hooks

用法

useToggle 用于在两个状态值间切换的 Hook

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 用于在 true,false 值间切换的 Hook

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

useToggle 钩子接受两个参数：

initialValue – 初始值
options – 用于切换的两个选项

Hook 返回切换后的新值和用于切换的函数。

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

Params

参数	默认值	类型	描述
initialValue	-	`T`	初始值
generateId	-	`[T, T]`	用于切换的两个选项

Result

参数	默认值	类型	描述
state	-	`T`	切换后的值
toggle	-	`React.SetStateAction<T>`	切换后的值