React Toggle Controls

Install

npm install --save @idui/react-toggle-controls

yarn add @idui/react-toggle-controls

Checkbox

• Props
• Playground

import React, { useState } from 'react'
import { Checkbox } from '@idui/react-toggle-controls'

function CheckboxExample() {
  const [checked, setChecked] = useState(false);

  return <Checkbox 
    checked={checked} 
    onChange={setChecked}
    size="20px"
    label="Check"
    icon={<span>{'✓'}</span>}
    colors={{ 
        on: { background: '#37D2C5', border: '#37D2C5', icon: '#FFFFFF' }, 
        off: { background: 'transparent', border: '#CCCCCC', icon: 'transparent', hover: { border: '#37D2C5' } }, 
        disabled: { background: '#F5F5F5', border: '#D9D9D9', icon: '#D9D9D9' }
    }}
  />
}

Radio

• Props
• Playground

import React, { useState } from 'react'
import { Radio } from '@idui/react-toggle-controls'

function RadioExample() {
  const [checked, setChecked] = useState(false);

  return <Radio 
    checked={checked} 
    onChange={setChecked}
    handleSize="20px"
    toggleSize="12px"
    label="Check"
    colors={{ 
        on: { toggle: '#37D2C5', border: '#37D2C5' }, 
        off: { toggle: 'transparent', border: '#37D2C5' }, 
        disabled: { toggle: '#D9D9D9', border: '#D9D9D9' }
    }}
  />
}

Switch

• Props
• Playground

import React, { useState } from 'react'
import { Switch } from '@idui/react-toggle-controls'

function SwitchExample() {
  const [checked, setChecked] = useState(false);

  return <Switch 
    checked={checked} 
    onChange={setChecked}
    handleSize={['36px', '16px']}
    toggleSize="22px"
    label="Check"
    colors={{ 
        on: { toggle: '#37D2C5', handle: '#37D2C5', icon: '#FFFFFF' }, 
        off: { toggle: '#FFFFFF', handle: '#CCCCCC', icon: '#CCCCCC' }, 
        disabled: { toggle: '#F5F5F5', handle: '#D9D9D9', icon: '#D9D9D9' }
    }}
    icons={{ on: <span>{'✓'}</span>, off: <span>{'✘'}</span> }}
  />
}

Custom Toggle

import React from 'react'
import ToggleControl from '@idui/react-toggle-controls'

function CustomToggle({ checked, disabled, label, onText, offText, className, ...props }) {
  return <label className={className} style={{ color: disabled ? 'gray' : 'black' }}>
    <ToggleControl checked={checked} disabled={disabled} {...props} />
    <span>{checked ? onText : offText}</span>
    {label && <span>{label}</span>}
  </label>
}

CustomToggle.propTypes = {
  ...ToggleControl.propTypes,
  className: PropTypes.string,
  label: PropTypes.string,
  onText: PropTypes.string,
  offText: PropTypes.string,
};

CustomToggle.defaultProps = {
  ...ToggleControl.defaultProps,
  onText: 'On',
  offText: 'Off'
};

License

MIT © [email protected]