React Switch UI Component

Common errors

• TS2307: Cannot find module 'rc-switch' or its corresponding type declarations.

  cause The TypeScript compiler cannot locate the package's type definitions. This might happen if the package is not installed, or if you're using `@rc-component/switch` but still importing from `rc-switch`.
  fix Ensure `rc-switch` is correctly installed (`npm install rc-switch` or `yarn add rc-switch`). If you intended to use the newer package, install `@rc-component/switch` instead (`npm install @rc-component/switch`) and update your import statements accordingly.

• Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

  cause This error occurs when React hooks (like `useState`, `useEffect`) are used in an invalid context, such as outside a functional component or in an incompatible React version environment.
  fix Ensure your project's React version meets the peer dependency requirements (>=16.9.0). Verify that `rc-switch` is being used within a valid React functional component or class component render method, and that your build setup correctly handles React's rendering lifecycle.

• TypeError: Cannot read properties of undefined (reading 'setState')

  cause This error typically indicates that `this` context is lost in an event handler within a class component, or that a state update is attempted on an unmounted component or an invalid object.
  fix If using class components, ensure event handlers are bound correctly (e.g., using arrow functions or binding in the constructor). For functional components, always use the `useState` setter function provided by the hook, and avoid directly mutating state.

Warnings

• breaking The `rc-switch` package has been effectively renamed and superseded by `@rc-component/switch`. All new feature development and active maintenance are now focused on the new scoped package. While `rc-switch` v4.1.0 is stable, users are encouraged to migrate to `@rc-component/switch` for ongoing updates and support.
  Fix: Migrate your project to use `@rc-component/switch`. This typically involves changing `import` paths and potentially updating styling or prop usage if there were minor breaking changes in the transition, though the core API is largely compatible.
• breaking Version 4.0.0 introduced new props like `inner container` and `inner checked/unchecked` for enhanced customization. While not strictly breaking existing functionality, ensure your codebase is compatible if you were relying on internal DOM structure or specific prop behaviors from v3.
  Fix: Review the changelog for v4.0.0. If you have custom CSS targeting internal elements, you might need to adjust selectors. New props like `checkedChildren` and `unCheckedChildren` provide content slots for the switch's inner labels.
• gotcha Older versions of `rc-switch` (prior to v3.2.2) might exhibit compatibility issues or warnings when used with React 17 or newer versions.
  Fix: Upgrade `rc-switch` to version `3.2.2` or higher to ensure full compatibility with React 17+. For projects on newer React versions (18+), it is highly recommended to use `@rc-component/switch`.

Install

• npm install rc-switch npm
• yarn add rc-switch yarn
• pnpm add rc-switch pnpm

Imports

• Switch
  wrong:

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

  correct:

  import Switch from 'rc-switch';

  Primarily designed for ESM import. CommonJS require() will likely work via transpilation but ESM is preferred in modern React projects.
• SwitchProps
  wrong:

  import { SwitchProps } from 'rc-switch';

  correct:

  import type { SwitchProps } from 'rc-switch';

  Use `import type` for type-only imports in TypeScript projects (TS 3.8+) to ensure they are erased in compiled JavaScript.
• Switch

  import Switch, { SwitchProps } from 'rc-switch';

  Common pattern for importing both the default component and its associated props in one line.

Quickstart

Demonstrates basic usage of the Switch component, including state management for controlled usage and custom styling.

import Switch from 'rc-switch';
import React from 'react';

const MySwitchComponent = () => {
  const [checked, setChecked] = React.useState(false);

  const handleChange = (newChecked) => {
    console.log('Switch toggled:', newChecked);
    setChecked(newChecked);
  };

  return (
    <div>
      <p>My Custom Switch:</p>
      <Switch
        checked={checked}
        onChange={handleChange}
        checkedChildren="ON"
        unCheckedChildren="OFF"
        className="my-custom-switch"
        style={{ backgroundColor: checked ? '#1890ff' : '#bfbfbf' }}
      />
      <p>Current state: {checked ? 'Enabled' : 'Disabled'}</p>
    </div>
  );
};

export default MySwitchComponent;