@paprika/collapsible-checklists
v1.1.0
Published
A controlled component that has checkable groups of checkable items. Checking the parent checks all of the children.
Readme
@paprika/collapsible-checklists
Description
A controlled component that has checkable groups of checkable items. Checking the parent checks all of the children.
Installation
yarn add @paprika/collapsible-checklistsor with npm:
npm install @paprika/collapsible-checklistsProps
CollapsibleChecklists
| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |children|node|true|-| | |onChange|func|true|-| Callback triggered when the input state is changed|
Group
| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |children|node|false|[]| Probably an array of "Items", but could be a Spinner or anything else| |isCheckedByDefault|bool|false|false| If checkbox is checked by default| |isDisabled|bool|false|false| If CollapsibleChecklists is disabled| |isIndeterminateByDefault|bool|false|false| Sets a visual state whether a checklist has been checked or not| |onExpand|func|false|null| Sets if the CollapsibleChecklists is open| |title|node|true|-| Indicate the title for the checklist|
Heading
| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |children|node|true|-| Content of the heading|
Item
| Prop | Type | required | default | Description | |-------|-------| -------- | --------- | ----------- | |children|node|true|-| | |isChecked|bool|false|false| If the item is checked or not| |isDisabled|bool|false|false| If the item is disabled| |onChange|func|false|() => {}| Callback when user checked an item|
Usage
import CollapsibleChecklists from "@paprika/collapsible-checklists";
const YourComponent = () => {
return (
<CollapsibleChecklists
onChange={() => {
/*...*/
}}
>
<CollapsibleChecklists.Heading>Flowers</CollapsibleChecklists.Heading>
<CollapsibleChecklists.Group title="Roses">
<CollapsibleChecklists.Item isChecked>Damask</CollapsibleChecklists.Item>
<CollapsibleChecklists.Item isChecked>Eden</CollapsibleChecklists.Item>
<CollapsibleChecklists.Item isChecked>Lady Banks</CollapsibleChecklists.Item>
</CollapsibleChecklists.Group>
<CollapsibleChecklists.Group title="Irises">
<CollapsibleChecklists.Item isChecked>Siberian</CollapsibleChecklists.Item>
<CollapsibleChecklists.Item>Yellow</CollapsibleChecklists.Item>
<CollapsibleChecklists.Item isDisabled>Bearded</CollapsibleChecklists.Item>
<CollapsibleChecklists.Item>Netted</CollapsibleChecklists.Item>
</CollapsibleChecklists.Group>
</CollapsibleChecklists>
);
};
export default YourComponent;