Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
rc-checkbox
Advanced tools
Package description
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.
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;"}
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 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 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
Checkbox ui component for react.
import checkbox from 'rc-checkbox';
export default () => <checkbox />;
IE / Edge | Firefox | Chrome | Safari | Electron |
---|---|---|---|---|
IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
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. |
npm install
npm start
Online demo: http://react-component.github.io/checkbox/
rc-checkbox is released under the MIT license.
FAQs
checkbox ui component for react
The npm package rc-checkbox receives a total of 758,658 weekly downloads. As such, rc-checkbox popularity was classified as popular.
We found that rc-checkbox demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.