useToggle

The useToggle hook allows you to manage the Toggle state with less code.

When to use

This hook is ideal for when you are using the Toggle component.

Usage

1
import { Field, Toggle, useToggle } from '@cerberus-design/react'
2

3
function SomeForm() {
4
 const { checked, handleChange } = useToggle({ checked: 'default' })
5
  return (
6
    <Field>
7
      <Toggle
8
        checked={checked === 'default'}
9
        id="default"
10
        onChange={handleChange}
11
        value="default"
12
      />
13
    </Field>
14
  )
15
}

API

interface UseToggleOptions {
  checked?: string
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
}
interface ToggleHookReturn {
  checked: string
  handleChange: (e: ChangeEvent<HTMLInputElement>) => void
}

define function useToggle(options?: UseToggleOptions): ToggleHookReturn

Arguments

The useToggle hook accepts the following optional arguments:

Name	Default	Description
checked		The initial checked state of the toggle.
onChange		The custom handler the hook will call for the `onChange` event.

Return

The useToggle hook returns a memoized object with the same properties as the options object passed in.