{"id":11638,"library":"rc-switch","title":"React Switch UI Component","description":"rc-switch is an unstyled, highly customizable switch (toggle) UI component for React applications, providing fundamental functionality without imposing visual opinions. The package provided here, `rc-switch`, reached its last major release at version 4.1.0. Since then, development and new features have continued under a new scoped package name, `@rc-component/switch`, which currently stands at version 1.0.3. This library is part of the `react-component` ecosystem, known for delivering foundational, barebones UI elements designed for maximum stylistic flexibility. It emphasizes broad browser compatibility and a minimal bundle size, making it suitable for integration into custom design systems. Releases for the original `rc-switch` package have ceased, with all active development now occurring in its successor package, `@rc-component/switch`.","status":"renamed","version":"4.1.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/switch","tags":["javascript","react","react-component","react-switch","switch","typescript"],"install":[{"cmd":"npm install rc-switch","lang":"bash","label":"npm"},{"cmd":"yarn add rc-switch","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-switch","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Primarily designed for ESM import. CommonJS require() will likely work via transpilation but ESM is preferred in modern React projects.","wrong":"const Switch = require('rc-switch');","symbol":"Switch","correct":"import Switch from 'rc-switch';"},{"note":"Use `import type` for type-only imports in TypeScript projects (TS 3.8+) to ensure they are erased in compiled JavaScript.","wrong":"import { SwitchProps } from 'rc-switch';","symbol":"SwitchProps","correct":"import type { SwitchProps } from 'rc-switch';"},{"note":"Common pattern for importing both the default component and its associated props in one line.","symbol":"Switch","correct":"import Switch, { SwitchProps } from 'rc-switch';"}],"quickstart":{"code":"import Switch from 'rc-switch';\nimport React from 'react';\n\nconst MySwitchComponent = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  const handleChange = (newChecked) => {\n    console.log('Switch toggled:', newChecked);\n    setChecked(newChecked);\n  };\n\n  return (\n    <div>\n      <p>My Custom Switch:</p>\n      <Switch\n        checked={checked}\n        onChange={handleChange}\n        checkedChildren=\"ON\"\n        unCheckedChildren=\"OFF\"\n        className=\"my-custom-switch\"\n        style={{ backgroundColor: checked ? '#1890ff' : '#bfbfbf' }}\n      />\n      <p>Current state: {checked ? 'Enabled' : 'Disabled'}</p>\n    </div>\n  );\n};\n\nexport default MySwitchComponent;","lang":"typescript","description":"Demonstrates basic usage of the Switch component, including state management for controlled usage and custom styling."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=4.1.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=4.0.0"},{"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`.","message":"Older versions of `rc-switch` (prior to v3.2.2) might exhibit compatibility issues or warnings when used with React 17 or newer versions.","severity":"gotcha","affected_versions":"<3.2.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","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`.","error":"TS2307: Cannot find module 'rc-switch' or its corresponding type declarations."},{"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.","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.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"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.","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.","error":"TypeError: Cannot read properties of undefined (reading 'setState')"}],"ecosystem":"npm"}