React-custom-toggle NPM

react-custom-toggle

A customizable toggle-switch component for react

Install

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

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