rc-switch

What is rc-switch?

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.

What are rc-switch's main functionalities?

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;

Other packages similar to rc-switch

react-switch

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

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.

README

rc-switch

---

switch ui component for react

Screenshots

Feature

• support ie8,ie8+,chrome,firefox,safari

install

Usage

var Switch = require('rc-switch');
var React = require('react');
React.render(<Switch />, container);

API

props

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

Development

npm install
npm start

Example

http://localhost:8001/examples/

online example: http://react-component.github.io/switch/examples/

Test Case

http://localhost:8001/tests/runner.html?coverage

Coverage

http://localhost:8001/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8001/tests/runner.html?coverage

License

rc-switch is released under the MIT license.