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.

Install

Usage

import Switch from 'rc-switch';

export default () => <Switch />;

Compatibility

IE / Edge	Firefox	Chrome	Safari	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

API

Property	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(checked, event)		called when switch is checked or unchecked
tabIndex	number		tab-index of switch node
onClick	Function(checked, event)		called when switch is clicked
autoFocus	boolean		get focus when mounts
disabled	boolean	false	whether switch is disabled
loadingIcon	React.ReactNode		specific the extra node. generally used in loading icon.

Development

npm install
npm start

Online demo: http://react-component.github.io/switch/examples/

License

rc-switch is released under the MIT license.