@potok/icon-switch

Switch component

Install

yarn add @potok/icon-switch

Usage

import IconSwitch from '@potok/icon-switch';
import ApplicantFavIcon from '@potok/icons/glyph/misc/fav';
import ApplicantMoveIcon from '@potok/icons/glyph/misc/move';

const Example = () => (
  <div>
    <IconSwitch
      value={true}
      enabledIcon={<ApplicantFavIcon />}
      disabledIcon={<ApplicantMoveIcon />}
    />
  </div>
);

Example

const Locked = require('@potok/icons/glyph/clear/locked').default;
const Unlocked = require('@potok/icons/glyph/clear/unlocked').default;
const Lock = require('@potok/icons/glyph/clear/lock').default;
initialState = { checked: false };

<>
  <div>
    <IconSwitch
      enabledIcon={<Locked primaryColor="#fff" size="xsmall" />}
      disabledIcon={<Unlocked primaryColor="#fff" size="xsmall" />}
      label="Controllable"
      value={state.checked}
      onChange={e => setState({ checked: e.target.checked })}
    />
  </div>

  <div style={{ marginTop: 20 }}>
    <IconSwitch
      enabledIcon={<Lock primaryColor="#fff" size="xsmall" />}
      disabledIcon={<Lock primaryColor="#fff" size="xsmall" />}
      label="Uncontrollable"
    />
  </div>

  <div style={{ marginTop: 20 }}>
    <IconSwitch
      enabledIcon={<Locked primaryColor="#fff" size="xsmall" />}
      disabledIcon={<Unlocked primaryColor="#fff" size="xsmall" />}
      label="Disabled"
      value={true}
      disabled
    />
  </div>
</>;