@shakthillc/components/src/ToggleSwitch/ToggleSwitch.js

React generic components for shakthi products

import React, { useState, useEffect } from "react";
import style from "./ToggleSwitch.module.css";
import { PropTypes } from "prop-types";

const ToggleSwitch = ({ text, onChange, defaultSwitch = false }) => {
  const [toggle, setToggle] = useState(defaultSwitch);

  useEffect(() => {
    setToggle(defaultSwitch);
  }, [defaultSwitch]);

  function handleChange(e) {
    setToggle(!toggle);
    onChange && onChange(!toggle);
  }
  return (
    <label  className={style.switch}>
      <input
        onChange={handleChange}
        type="checkbox"
        checked={toggle}
      />
      <span className={`${style.slider} ${style.round}`}></span>
      <p className={style.textStyle}>{text}</p>
    </label>
  );
};

export default ToggleSwitch;
ToggleSwitch.defaultProps = {
  onChange: function () {
    console.log();
  },
};
ToggleSwitch.propTypes = {
  text: PropTypes.string,
  onChange: PropTypes.func,
};