RC Switch

import Switch from "rc-switch";

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

import React, { useState } from "react";
import Switch from "rc-switch";
import "rc-switch/assets/index.css"; // Import default styles

export default function App() {
  const [checked, setChecked] = useState(false);

  return (
    <Switch
      checked={checked}
      onChange={(value) => setChecked(value)}
      checkedChildren="ON"
      unCheckedChildren="OFF"
    />
  );
}

/**
 * React switch component with toggle functionality
 * @param props - Switch configuration props
 * @param ref - Forwarded ref to HTMLButtonElement
 * @returns JSX element representing the switch
 */
declare const Switch: React.ForwardRefExoticComponent<
  SwitchProps & React.RefAttributes<HTMLButtonElement>
>;

interface SwitchProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onClick'> {
  /** Additional CSS class name */
  className?: string;
  /** CSS class prefix for styling (default: 'rc-switch') */
  prefixCls?: string;
  /** Whether the switch is disabled */
  disabled?: boolean;
  /** Content displayed when switch is checked */
  checkedChildren?: React.ReactNode;
  /** Content displayed when switch is unchecked */
  unCheckedChildren?: React.ReactNode;
  /** Callback fired when switch state changes */
  onChange?: SwitchChangeEventHandler;
  /** Keyboard event handler */
  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
  /** Click event handler */
  onClick?: SwitchClickEventHandler;
  /** Tab index for keyboard navigation */
  tabIndex?: number;
  /** Whether component should auto focus when mounted */
  autoFocus?: boolean;
  /** Controlled checked state */
  checked?: boolean;
  /** Default checked state for uncontrolled usage */
  defaultChecked?: boolean;
  /** Loading indicator icon */
  loadingIcon?: React.ReactNode;
  /** Inline styles */
  style?: React.CSSProperties;
  /** Title attribute for accessibility */
  title?: string;
}

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

// Uncontrolled switch
<Switch defaultChecked={true} onChange={(checked) => console.log(checked)} />

// Controlled switch
const [checked, setChecked] = useState(false);
<Switch checked={checked} onChange={setChecked} />

// With custom content
<Switch 
  checkedChildren="开" 
  unCheckedChildren="关"
  onChange={(checked) => console.log(`Switch is ${checked ? 'on' : 'off'}`)}
/>

// Disabled state
<Switch disabled checked={true} />

// With loading indicator
<Switch loadingIcon={<SpinnerIcon />} />

// Custom styling
<Switch 
  className="my-switch" 
  prefixCls="custom-switch"
  style={{ marginTop: 20 }}
/>

// Auto focus on mount
<Switch autoFocus onChange={(checked) => console.log(checked)} />

// Ref access for programmatic focus management
const switchRef = useRef<HTMLButtonElement>(null);
useEffect(() => {
  switchRef.current?.focus();
}, []);
<Switch ref={switchRef} />

/**
 * Event handler for switch state changes
 * @param checked - New checked state
 * @param event - Mouse or keyboard event that triggered the change
 */
type SwitchChangeEventHandler = (
  checked: boolean,
  event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>
) => void;

/**
 * Event handler for switch clicks (legacy alias for SwitchChangeEventHandler)
 * @param checked - Current checked state after click
 * @param event - Mouse or keyboard event that triggered the click
 */
type SwitchClickEventHandler = SwitchChangeEventHandler;

/** Component display name for debugging */
Switch.displayName = 'Switch';