Toggle Switch Component

Toggle.jsx

import React from "react";
import { string, bool, func } from "prop-types";
import styled from "styled-components";

const Input = styled.input`
  display: none;
`;

const Slider = styled.span`
  position: absolute;
  cursor: pointer;
  top: 0.4rem;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #CFCFCF;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 10rem;

  height: 1.2rem;

  &:before {
    border-radius: 50%;
    position: absolute;
    content: "";
    top: -0.15rem;
    height: 1.6rem;
    width: 1.6rem;
    background-color: #8A8A8A;
    -webkit-transition: 0.4s;
    transition: 0.5s cubic-bezier(0, 0.65, 0.2, 1);
  }
`;
const Switch = styled.label`
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 2rem;

  ${Input}:checked + ${Slider} {
    background-color: #B5E5CC;
  }
  ${Input}:checked + ${Slider}:before {
    background-color: #5BC58F;
  }

  ${Input}:focus + ${Slider} {
    box-shadow: 0 0 1px #2196f3;
  }

  ${Input}:checked + ${Slider}:before {
    transform: translateX(1.4rem);
  }
`;

export default function ToggleInput({
  className,
  onChange,
  value,
  name,
  id,
}) {
  return (
    <Switch className={className} onChange={onChange}>
      <Input type="checkbox" checked={value} id={id} name={name} onChange={onChange} />
      <Slider />
    </Switch>
  );
}

ToggleInput.propTypes = {
  className: string,
  name: string,
  value: bool,
  onChange: func
};

ToggleInput.defaultProps = {
  className: undefined,
  name: undefined,
  value: false,
  onChange: undefined
};