The rc-switch npm package is a React component library for creating switch (toggle) inputs. It allows developers to easily implement switch components in their React applications, providing both visual and functional customization options.
Basic switch
This code sample demonstrates how to render a basic switch component using the rc-switch package. It imports the Switch component from the package and includes it in a React component to be displayed.
import React from 'react';
import Switch from 'rc-switch';
function App() {
return (
<Switch />
);
}
export default App;Customized switch
This example shows how to customize a switch by adding labels for the checked and unchecked states, and setting the default state to checked. The 'checkedChildren' and 'unCheckedChildren' props allow for custom labels, while 'defaultChecked' initializes the switch in the on position.
import React from 'react';
import Switch from 'rc-switch';
function App() {
return (
<Switch
checkedChildren="on"
unCheckedChildren="off"
defaultChecked
/>
);
}
export default App;react-switch is a similar package that provides a component for rendering switch inputs in React applications. It offers a different API and additional customization options compared to rc-switch, such as different sizes and colors.
react-toggle offers functionality similar to rc-switch, with a focus on creating toggle switches for React apps. It differentiates itself with a more extensive API for customization, including custom icons for the toggle states.
switch ui component for react
var Switch = require('rc-switch');
var React = require('react');
React.render(<Switch />, container);
| name | type | default | description |
|---|---|---|---|
| prefixCls | String | rc-switch | |
| className | String | '' | additional class name of root node |
| checked | boolean | false | whether switch is checked |
| defaultChecked | boolean | false | whether switch is checked on init |
| onChange | Function | called when switch is checked or unchecked |
npm install
npm start
http://localhost:8001/examples/
online example: http://react-component.github.io/switch/examples/
http://localhost:8001/tests/runner.html?coverage
rc-switch is released under the MIT license.
1.4.0
FAQs
switch ui component for react
The npm package rc-switch receives a total of 1,066,769 weekly downloads. As such, rc-switch popularity was classified as popular.
We found that rc-switch demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.