rc-checkbox

What is rc-checkbox?

The rc-checkbox npm package provides React components for creating and managing checkboxes. It allows developers to easily implement checkbox functionality in their React applications with customizable options.

What are rc-checkbox's main functionalities?

Basic Checkbox

This code sample demonstrates how to use the rc-checkbox package to create a basic checkbox component in a React application.

{"import React from 'react';\nimport Checkbox from 'rc-checkbox';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <Checkbox />\n    );\n  }\n}\n\nexport default App;"}

Controlled Checkbox

This code sample shows how to create a controlled checkbox where the checked state is managed by the component's state using React hooks.

{"import React, { useState } from 'react';\nimport Checkbox from 'rc-checkbox';\n\nfunction App() {\n  const [checked, setChecked] = useState(false);\n\n  const handleChange = (e) => {\n    setChecked(e.target.checked);\n  };\n\n  return (\n    <Checkbox\n      checked={checked}\n      onChange={handleChange}\n    />\n  );\n}\n\nexport default App;"}

Custom Styles

This code sample illustrates how to apply custom styles to the checkbox component using the style prop.

{"import React from 'react';\nimport Checkbox from 'rc-checkbox';\n\nfunction App() {\n  return (\n    <Checkbox\n      style={{ fontSize: '20px', color: 'blue' }}\n    />\n  );\n}\n\nexport default App;"}

Other packages similar to rc-checkbox

react-checkbox-group

This package provides a set of React components for creating a group of checkboxes. It differs from rc-checkbox by focusing on groups of checkboxes rather than individual ones.

react-custom-checkbox

React-custom-checkbox is a package that allows for more extensive customization of the checkbox appearance. It offers a different approach to styling compared to rc-checkbox, which might be preferable for developers looking for more design control.

react-toggle

React-toggle is similar to rc-checkbox in that it provides toggle components for React apps. However, it is styled to look like an iOS switch and is more specialized for that toggle switch appearance.

README

rc-checkbox

Checkbox ui component for react.

Install

Usage

import checkbox from 'rc-checkbox';

export default () => <checkbox />;

Compatibility

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

API

name	type	default	description
prefixCls	String	rc-checkbox
className	String	''	additional class name of root node
name	String		same with native input checkbox
checked	enum: 0,1,2
defaultChecked	enum: 0,1,2	0	same with native input checkbox
onChange	Function(e:Event, checked:Number)		called when checkbox is changed. e is native event, checked is original checked state.

Development

npm install
npm start

Online demo: http://react-component.github.io/checkbox/

License

rc-checkbox is released under the MIT license.