@shakthillc/components/src/CheckBox/CheckBox.js

React generic components for shakthi products

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

const CheckBox = ({ checked = false,onChange,text="" }) => {
  const [flag, setFlag] = useState(checked);
  let textCheck = text ===undefined || text === null || text === "" ? "0px" : "24px"
  useEffect(() => {
    setFlag(checked);
  }, [checked]);
  const handleChange = function () {
    setFlag(!flag);
    onChange && onChange(!flag)
  };
  return (
    <div className={style["check-box"]}>
      <label className={style["check-box__each"]}>
        <input
          type="checkbox"
          name="checkbox"
          onClick={handleChange}
          checked={flag}
        />
        <span
          className={style["check-box__checkmark"]}
        ></span>
        
      </label>
     <span style={{marginLeft: textCheck}}> {text}</span>
    </div>
  );
};

export default CheckBox;

CheckBox.defaultProps = {
  onChange: (data) => {
    console.log(data);
  },
};
CheckBox.propTypes = {
  disabled: PropTypes.bool,
  options: PropTypes.arrayOf({
    value: PropTypes.string,
    label: PropTypes.number,
  }),
};