phoenix-components-library/react/components/Switch/Switch.jsx

Component library for Phoenix Frontend Projects.

import React from "react";
import PropTypes from "prop-types";

import "./Switch.css";

const propTypes = {
  defaultChecked: PropTypes.bool,
  small: PropTypes.bool,
  handleChangeCheckbox: PropTypes.func,
  disabled: PropTypes.bool
};

const defaultProps = {
  defaultChecked: false,
  small: false,
  handleChangeCheckbox: () => {},
  disabled: false
};

const Switch = ({ small, defaultChecked, handleChangeCheckbox, disabled }) => (
  <label className={`es-switch ${small ? "small" : ""}`}>
    <input
      type="checkbox"
      onChange={() => handleChangeCheckbox()}
      checked={defaultChecked}
      disabled={disabled}
    />
    <div className="slider round">
      <span className="on">ON</span>
      <span className="off">OFF</span>
    </div>
  </label>
);

Switch.propTypes = propTypes;
Switch.defaultProps = defaultProps;

export { Switch };