React Switch

import Switch from "react-switch";

const Switch = require("react-switch");

import React, { useState } from "react";
import Switch from "react-switch";

function MyComponent() {
  const [checked, setChecked] = useState(false);

  const handleChange = (checked) => {
    setChecked(checked);
  };

  return (
    <label>
      <span>Enable notifications</span>
      <Switch onChange={handleChange} checked={checked} />
    </label>
  );
}

declare class ReactSwitch extends React.Component<ReactSwitchProps & AllowedHTMLInputProps> {}

interface ReactSwitchProps {
  /** The checked state of the switch. If true, the switch is set to checked. If false, it is not checked. */
  checked: boolean;
  
  /** 
   * Invoked when the user clicks or drags the switch.
   * checked describes the presumed future state of the checked prop.
   * event is a native MouseEvent when the handle is clicked or dragged, and a SyntheticEvent at all other times.
   * id is the ID prop of the switch.
   */
  onChange: (
    checked: boolean,
    event: React.SyntheticEvent<MouseEvent | KeyboardEvent> | MouseEvent,
    id: string
  ) => void;
  
  /** When true, the switch will no longer be interactive and its colors will be greyed out. */
  disabled?: boolean;
  
  /** The switch will take on this color when it is not checked. Only accepts 3 or 6 digit hex colors, e.g., #888, #45abcd. Defaults to #888. */
  offColor?: string;
  
  /** The switch will take on this color when it is checked. Only accepts 3 or 6 digit hex colors, e.g., #080, #45abcd. Defaults to #080. */
  onColor?: string;
  
  /** The color of the handle of the switch when not checked. Only accepts 3 or 6 digit hex colors, e.g., #fff, #45abcd. Defaults to #fff. */
  offHandleColor?: string;
  
  /** The color of the handle of the switch when checked. Only accepts 3 or 6 digit hex colors, e.g., #fff, #45abcd. Defaults to #fff. */
  onHandleColor?: string;
  
  /** The diameter of the handle, measured in pixels. By default it will be slightly smaller than the height of the switch. */
  handleDiameter?: number;
  
  /** Icon to display on the handle while switch is unchecked. */
  uncheckedHandleIcon?: JSX.Element;
  
  /** Icon to display on the handle while switch is checked. */
  checkedHandleIcon?: JSX.Element;
  
  /** An icon that will be shown on the switch when it is not checked. Set to false to show no icon. Defaults to an x icon. */
  uncheckedIcon?: JSX.Element | boolean;
  
  /** An icon that will be shown on the switch when it is checked. Set to false to show no icon. Defaults to a checked icon. */
  checkedIcon?: JSX.Element | boolean;
  
  /** The box-shadow of the handle of the switch. */
  boxShadow?: string;
  
  /** The box-shadow of the handle of the switch when it is active or focused. Do not set this to null as it is important for accessibility. Defaults to '0px 0px 2px 3px #33bbff'. */
  activeBoxShadow?: string;
  
  /** The height of the background of the switch, measured in pixels. Defaults to 28. */
  height?: number;
  
  /** The width of the background of the switch, measured in pixels. Defaults to 56. */
  width?: number;
  
  /** Border radius of the switch and the handle. */
  borderRadius?: number;
  
  /** The className of the outer shell of the switch. */
  className?: string;
  
  /** The id of the embedded checkbox. */
  id?: string;
}

type AllowedHTMLInputProps = Omit<
  React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
  "onFocus" | "onBlur" | "onKeyUp" | "onChange" | "ref" | keyof ReactSwitchProps
>;

import React, { useState } from "react";
import Switch from "react-switch";

// Basic usage
function BasicSwitch() {
  const [checked, setChecked] = useState(false);
  
  return (
    <Switch
      onChange={setChecked}
      checked={checked}
    />
  );
}

// Customized appearance
function CustomSwitch() {
  const [enabled, setEnabled] = useState(true);
  
  return (
    <Switch
      onChange={setEnabled}
      checked={enabled}
      onColor="#86d3ff"
      onHandleColor="#2693e6"
      handleDiameter={30}
      uncheckedIcon={false}
      checkedIcon={false}
      boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
      activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
      height={20}
      width={48}
      className="react-switch"
      id="material-switch"
    />
  );
}

// With custom icons
function IconSwitch() {
  const [darkMode, setDarkMode] = useState(false);
  
  return (
    <Switch
      onChange={setDarkMode}
      checked={darkMode}
      checkedIcon={<span style={{ color: 'white', fontSize: '12px' }}>🌙</span>}
      uncheckedIcon={<span style={{ color: 'white', fontSize: '12px' }}>☀️</span>}
      onColor="#4a5568"
      offColor="#e2e8f0"
    />
  );
}

// Disabled state
function DisabledSwitch() {
  const [value, setValue] = useState(false);
  
  return (
    <Switch
      onChange={setValue}
      checked={value}
      disabled={true}
    />
  );
}

// With form integration
function FormSwitch() {
  const [formData, setFormData] = useState({ notifications: false });
  
  const handleSwitchChange = (checked, event, id) => {
    setFormData({ ...formData, [id]: checked });
  };
  
  return (
    <form>
      <label htmlFor="notifications-switch">
        <span>Email notifications</span>
        <Switch
          onChange={handleSwitchChange}
          checked={formData.notifications}
          id="notifications"
          name="notifications"
          aria-label="Toggle email notifications"
        />
      </label>
    </form>
  );
}

const defaultProps = {
  disabled: false,
  offColor: "#888",
  onColor: "#080",
  offHandleColor: "#fff",
  onHandleColor: "#fff",
  uncheckedIcon: /* Default X SVG icon */,
  checkedIcon: /* Default checkmark SVG icon */,
  boxShadow: null,
  activeBoxShadow: "0 0 2px 3px #3bf",
  height: 28,
  width: 56
};