React JS Toggle Switch

reactjs-toggleswitch is a customizable toggle switch component implemented using react js and TypeScript for React applications. It provides a simple and intuitive way to implement toggle functionality with customizable styles and behavior.

Installation

you can install this package using below npm command

npm install reactjs-toggleswitch

or

yarn add reactjs-toggleswitch

Usage

Import the ToggleSwitch component in your React code and use it as follows:

import React, { useState } from 'react';
import {ToggleSwitch} from 'reactjs-toggleswitch';

const MyComponent: React.FC = () => {
  const [isChecked, setIsChecked] = useState<boolean>(false);

  const handleChange = (checked: boolean) => {
    setIsChecked(checked);
  };

  return (
    <div>
      <h2>Toggle Default Switch Example</h2>
      <ToggleSwitch checked={isChecked} onToggle={handleChange} />
    </div>
  );
};

For more details regarding usage please refer EXAMPLES.md

Note: If styles are not working in your system after installation please import the below style.

import 'reactjs-toggleswitch/dist/cjs/index.css';

Options

The ToggleSwitch component accepts the following props:

| Option | type | Description | | :---: | :---: | :---: | | onToggle | function | Callback function called when the switch state changes/toggle. Receives a boolean parameter indicating the new state. | | checked | boolean | Specifies whether the switch is checked or not. | | onColor | string | specifies background color change when switch is checked | | offColor | string | specifies background color change when switch is unchecked | | disable | boolean | specifies for disabling/enabling the toggle. | | ariaLabel | string| used to provide a label or description for an element. | |children |component | specifies thumb icon use any component like font-awesome | | id | string| The value represents the id attribute of the encapsulated input element. | | name | string| The value represents the name attribute of the encapsulated input element.| | value | string| The value represents the value attribute of the encapsulated input element.| |width|string|The value represents width of toggle switch| |thumbOnColor|string|specifies background color of thumb change when switch is checked| |thumbOffColor|string|specifies background color of thumb change when switch is unchecked|

Contribution

We welcome contributions! If you'd like to contribute to reactjs-toggleswitch, please follow our Contribution Guidelines.

Author

Subramanya KS

License

This project is licensed under the MIT License - see the LICENSE file for details.