switch

Switches toggle the state of a single item on or off.

more info here

Install

yarn add react reakit @gdo-bzh/switch @gdo-bzh/system @xstyled/styled-components styled-components
# or
npm install react reakit @gdo-bzh/switch @gdo-bzh/system @xstyled/styled-components styled-components -S

Usage

import React from 'react'
import { Checkbox } from 'reakit/Checkbox'

const Example = () => {
  const [checked, toggle] = React.useReducer(value => !value, true)

  return <Switch id="mySwitcher" checked={checked} onChange={toggle} />
}

Types

type Options = StyledComponentProps<typeof S.Checkbox, DefaultTheme, any, never>

export type Props = Options & {
  /**
   * functional color
   */
  variantColor?: FunctionalColor
  /**
   * A processing status is an animation on the thumb of the switch.
   * Because a switch shows the actual status of something, sometimes there is a delay in its change of state.
   * In such cases, a processing status animation can be used.
   */
  processing?: boolean
}

License

MIT © gdo-bzh