CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-rc-switch

Switch UI component for React with toggle functionality and extensive customization options

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

index.mddocs/

RC Switch

RC Switch is a lightweight, accessible React toggle switch component with extensive customization options. It provides a complete switch implementation with controlled/uncontrolled state management, keyboard navigation, loading states, and comprehensive styling control.

Package Information

  • Package Name: rc-switch
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install rc-switch

Core Imports

import Switch from "rc-switch";

For CommonJS:

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

Basic Usage

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"
    />
  );
}

Architecture

RC Switch is built around a single Switch component that:

  • State Management: Uses rc-util's useMergedState hook for controlled/uncontrolled state handling
  • Accessibility: Implements ARIA switch role with proper aria-checked attributes
  • Keyboard Support: Built-in LEFT/RIGHT arrow key navigation using rc-util's KeyCode constants
  • Forward Ref: Provides direct access to the underlying HTMLButtonElement
  • Event System: Separate onChange/onClick handlers with consistent event signatures

Capabilities

Switch Component

Main toggle switch component with full state management and accessibility features.

/**
 * 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;
}

Usage Examples:

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 Handlers

Type-safe event handler definitions for switch interactions.

/**
 * 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;

Display Name

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

Keyboard Navigation

RC Switch includes built-in keyboard support:

  • LEFT Arrow: Changes switch to unchecked state
  • RIGHT Arrow: Changes switch to checked state
  • Space/Enter: Toggles switch state (default button behavior)

CSS Classes

RC Switch applies dynamic CSS classes for styling:

  • {prefixCls} - Base class (default: 'rc-switch')
  • {prefixCls}-checked - Applied when switch is checked
  • {prefixCls}-disabled - Applied when switch is disabled
  • {prefixCls}-inner - Inner container for switch content
  • {prefixCls}-inner-checked - Container for checked children
  • {prefixCls}-inner-unchecked - Container for unchecked children

Browser Compatibility

  • IE11, Edge
  • Firefox (last 2 versions)
  • Chrome (last 2 versions)
  • Safari (last 2 versions)
  • Electron (last 2 versions)

Install with Tessl CLI

npx tessl i tessl/npm-rc-switch

docs

index.md

tile.json