react-toggle-slider-switch v1.0.2

React Toggle Slider Switch

A customizable react toggle slider switch component. Simple to use with built-in label functionality and customization options.

Installation

To install the package, run:

Using npm:

npm install react-toggle-slider-switch

Using yarn:

yarn add react-toggle-slider-switch

Screenshot

Basic Usage

Here’s a basic example using a functional component with the ReactToggleSliderSwitch:

Copy code:

import React, { useState } from "react";
import ReactToggleSliderSwitch from "react-toggle-slider-switch";

const BasicExample: React.FC = () => {
  const [checked, setChecked] = useState<boolean>(false);

  const handleChange = (newChecked: boolean): void => {
    setChecked(newChecked);
  };

  return (
    <ReactToggleSliderSwitch
      checked={checked}
      onChange={handleChange}
      onColor="#22c55e"
      offColor="#d1d5db"
      checkedIcon={true}
      uncheckedIcon={true}
      height={28}
      width={70}
    />
  );
};

export default BasicExample;

Label Example

Here’s a custom example with additional styles, using the ReactToggleSliderSwitch component:

Copy code:

import React from "react";
import ReactToggleSliderSwitch from "react-toggle-slider-switch";

const LabelExample: React.FC = () => {
  const [checked, setChecked] = useState<boolean>(false);

  const handleChange = (newChecked: boolean): void => {
    setChecked(newChecked);
  };

  return (
    <ReactToggleSliderSwitch
      label="Label"
      checked={checked}
      onChange={handleChange}
      onColor="#22c55e"
      offColor="#d1d5db"
      checkedIcon={true}
      uncheckedIcon={true}
      height={28}
      width={70}
    />
  );
};

export default LabelExample;

Custom Example

Here’s an custom example with label using a functional component with the ReactToggleSliderSwitch:

Copy code:

import React from "react";
import ReactToggleSliderSwitch from "react-toggle-slider-switch";

const CustomExample: React.FC = () => {
  const [checked, setChecked] = useState<boolean>(false);

  const handleChange = (newChecked: boolean): void => {
    setChecked(newChecked);
  };

  return (
    <ReactToggleSliderSwitch
      label="Custom Label"
      checked={checked}
      onChange={handleChange}
      onColor="#0f0"
      offColor="#f00"
      height={28}
      width={70}
      checkedIcon={false}
      uncheckedIcon={false}
      switchBgClassName="custom-bg-class"
      switchHandleClassName="custom-handle-class"
      labelStyle={{ fontWeight: "bold", fontSize: "14px" }}
    />
  );
};

export default CustomExample;

Features

Customizable colors : Change the on and off switch colors.

Built-in label support : Automatically handles labels if you need one.

Drag & Click Behavior : You can click or drag to toggle the switch.

Custom icons : Supports custom icons for both checked and unchecked states.

Props

Development

You're welcome to contribute to react-toggle-switch. Keep in mind that big changes have to be thoroughly tested on different browsers and devices before they can be merged.

To set up the project:

Fork and clone the repository

Install dependencies:

npm install

Run the development server:

npm run dev

License

This project is licensed under the MIT License.