React Custom Toggle

Installation

npm install react-custom-toggle
yarn add react-custom-toggle

Usage


import React, { useState } from 'react';
import Toggle from 'react-custom-toggle';
     
const Example = () => {
  const [isSunShining, setIsSunShining] = useState(false);

  return (
    <Toggle checked={isSunShining} onChange={setIsSunShining} />
  );
};

Sizes

const [isSunShining, setIsSunShining] = useState(false);
<Toggle checked={isSunShining} onChange={setIsSunShining} />

Texts

OFFON
const [isSunShining, setIsSunShining] = useState(false);
<Toggle checked={isSunShining} onChange={setIsSunShining} 
  offText="OFF" onText="ON" />

Colors

Valid values: hex colors (e.g #ff2bbc) or named colors.

Background colors

const [isSunShining, setIsSunShining] = useState(false);
<Toggle checked={isSunShining} onChange={setIsSunShining} 
  colorOff="#ed8936" colorOn="#63b3ed" />

Texts colors

OFFON
const [isThatRight, setIsThatRight] = useState(false);
<Toggle checked={isThatRight} onChange={setIsThatRight} offText="OFF"
  onText="ON" textColorOff="violet" textColorOn="royalblue" />