react-custom-toggle

A customizable toggle-switch component for react

Demo and docs

Install

npm install react-custom-toggle

Or

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} />
  );
};

Props

Name	Type	Required	Description
checked	boolean	true	Determines whehter the toggle is checked or not
onChange	function	true	A function to handle the changes in the toggle state

Sizes

Only single size can be picked. The toggle has a medium size by default (if no size specified)

Name	Type	Default	Description
extraLarge	boolean	false	Set an extra large size to the toggle
large	boolean	false	Set a large size to the toggle
small	boolean	false	Set a small size to the toggle
extraSmall	boolean	false	Set an extra small size to the toggle

Texts

Name	Type	Default	Description
onText	string	''	Text attached to the 'on' state
offText	string	''	Text attached to the 'off' state

Colors

Name	Type	Default	Description
colorOn	string	#68d391	Background color of the Toggle in 'on' mode
colorOff	string	#fc8181	Background color of the Toggle in 'off' mode
textColorOn	string	inherit	Color of the 'on' text
textColorOff	string	inherit	Color of the 'off' text

Other props

Name	Type	Default	Description
disabled	boolean	false	Set the Toggle disabled

License

MIT © YairAriel