CheckBoxGroup is not just a checkbox, it is a Grouped checkbox

中文版说明 戳这里

install

npm install react-native-checkboxgroup

API

this lib only expose one default component called CheckBoxGroup , it treats each child as an checkbox option. it self also has a feature to toggle all the options at a time. the typical usage is the shopping cart like Tmall or JD.

below is the example:

import CheckBoxGroup from "react-native-checkboxgroup"

<CheckBoxGroup>
	<Text key="B">this is a simplest checkbox item</Text>
	<View key="CC">
		this is more complex checkbox item
	</View>
	<CustomComp key="BBB">also any custom UI can be a checkbox item</CustomComp>
</CheckBoxGroup>

in this example there are 3 checkbox options in one group .each option has an interactive indicator telling whether it is selected or not . The indicator is highly customizable, also the layout of the item is customizable by rowTemplate

indicator by default is   on/off
|____________________________________
| ⬛️ |     here is the group title  |----------> title Bar is consist of the title and indicator
|___________________________________________
| ⬛️ |  this is a simplest checkbox item		|-----> option item is consist of the indicator and a child ui
| ⬛️ |  this is more complex checkbox item	|
| ⬛️ |  also any custom UI can be a checkbox item	|
|________________________________________________
| here is the group footer  |----------> pure UI element no check box available, for tips purpose
|___________________________________________

CheckBoxGroup

***all children in CheckBoxGroup tag MUST have the key property ，it reuse the key props of react as the item's id, it tells who is selected. But there is one exception ,that is the outermost CheckBoxGroup , it use identifier as the id prop but it is optional ***

the Nested CheckBoxGroup ***extends all the customizable props of the father CheckBoxGroup by default ,so it means plz do config on top level CheckBoxGroup ***

it also support radio mode ,under this mode plz don't nest CheckBoxGroup too deep, more then 2 depth is not predictable .

|property|signature|description| |----|---|---| |identifier?: string;||the id of the outermost CheckBoxGroup | |mode?:"RadioGroupMode"||switch on the radio mode ，the toggle api of CheckBoxGroup doesn't work of under this mode ,it makes sense, also the indicator of the group is not visible| |isGroupTitleBarVisiable?:boolean;||should show the title bar of the group ,default true| |renderTitle?:()=>React.ReactElement;||customize the title of the group | |renderCheckBox?: (isSelected: boolean) => ReactElement;||customize the indicator UI| |rowTemplate?: (checkbox: ReactElement, item: React.ReactNode,key:string) => ReactElement;||customize the layout of one option item，PARAMS=> checkbox the customized indicator rendered by renderCheckBox if exist, or on/off by default ，PARAMS=>item：CheckBoxGroup the child ui (UI in CheckBoxGroup tag)，PARAMS=>key:the id of the option item| |onChange?:(k:SelectedStatus)=>void;||the select status （include the nested childrens' status） changed by user |

|Method| Desc | |----|---| |getSelectedValue(isFilterFalse:boolean=true):SelectedStatus|use this to get the group status manually,by default it only return the selected option items,by setting isFilterFalse to false to get all option status no matter selected or not| |toggle(trueOrFalse?:boolean): void;|select all or deselect all option of a group

Examples

|Case|Code|Gif| |---|---|---| |simple Exam| SimpleExample| |Nest Group Exam |SimpleNestExample| |Customize Group Exam| CustomizeExample| |Add/Del option Item Dynamic Exam|DynamicItemExample| |Radio Mode Eaxm|RadioGroupMode|