Registry / rc-switch

rc-switch

JSON →
library4.1.0jsnpmunverified

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`.

npm install rc-switch
github ↗package ↗
INSTALL
IMPORT
SIG · RC-SWITCH
R
rc-switch
javascriptv4.1.0
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

Switch
✓ import Switch from 'rc-switch';
✗ const Switch = require('rc-switch');
Primarily designed for ESM import. CommonJS require() will likely work via transpilation but ESM is preferred in modern React projects.
SwitchProps
✓ import type { SwitchProps } from 'rc-switch';
✗ import { 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.

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;
Debug
Known issues
breakingThe `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.
affects: >=4.1.0
breakingVersion 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.
affects: >=4.0.0
gotchaOlder 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`.
affects: <3.2.2
Errors
Common errors & fixes
TS2307: Cannot find module 'rc-switch' or its corresponding type declarations.
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.
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')
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.
Upgrade
Version history
4.1.0latest on npm
Audit
Dependencies
reactrequiredPeer dependency for rendering React components.
react-domrequiredPeer dependency for rendering React components to the DOM.
Agent activity
6 hits · last 30 days
node
6
Resources
githubhttps://github.com/react-component/switch ↗
packagehttps://www.npmjs.com/package/rc-switch ↗
rc-switch — npm install rc-switch · libregistry