Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-checkboxify

mobinkaarimi11MIT2.0.3TypeScript support: included

react-checkboxify is a fantastic package that allows you to easily add and utilize checkboxes in your React projects.

checkbox, react-checkbox, group-checkbox, custom-checkbox

readme

react-checkboxify

Single Checkbox and group Checkboxes UI component for React
with incredible options for access to full customize with easy usage.


dumi

Install

rc-checkbox

Usage

import Checkbox, {GroupCheckbox} from 'react-checkboxify';
export <GroupCheckbox />;
export default () => <checkbox />;

Compatibility

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
IE10, Edge last 2.25 versions last 2.25 versions last 2.25 versions last 2.25 versions

API

Checkbox

name type default description
name string
label string null label of input for show to client
parentClassName String "" additional class name of parent div element
labelClassName String "" additional class name of label element
inputClassName String "" additional class name of root node
onChange Function(e:Event, checked:Number) called when checkbox is changed. e is native event, checked is original checked state.
checked Boolean: true, false false same with native input checkbox
disabled Boolean: true, false false use if for disable some checkbox in specific situation
customIcon Obj {checked?: "iconPath", unChecked?: "iconPath",
size : number }
null with checked and unchecked key you can use any icon for your checkbox, also you can change size it with size key and number value

GroupCheckbox

name type default description
list Array [] use it for send list of items to render item with checkbox icon
setSelectedItems React.SetState null add set state in props for gave all items checking = true, I set all Object into Array with checked:true value.
selectType String: "single" | "multiple" "single" you can set use can select only one item or more.
hasSearch Boolean false add search bar for use easier than of huge list
searchOption Object {label: "", className: "", disabled: false } customize everything you need to change it in search component like default label, className and disabled option.
parentClassName String "" additional class name of parent div element
checkboxClassName String "" additional class name of label element
checkboxFilledClassName String "" additional class name of root node
labelClassName String "" additional class name of root node
customIcon Obj {checked?: "iconPath", unChecked?: "iconPath",
size : number }
null with checked and unchecked key you can use any icon for your checkbox, also you can change size it with size key and number value

Online demo: https://mobinkaarimi.github.io/react-checkboxify/

License

react-checkboxify is released under the MIT license.