0.2.0 • Published 5 years ago
@govuk-frederic/compact-table-accordion-group v0.2.0
CompactTableAccordionGroup
Import
import CompactTableAccordionGroup from '@govuk-frederic/compact-table-accordion-group';
Usage
State managed with children
import manageState from 'manage-state';
const ManagedCompactTableAccordionGroup = manageState(CompactTableAccordionGroup, {
propsToState: ['open'],
});
<ManagedCompactTableAccordionGroup title="Title" expanded="expanded">
Children
</ManagedCompactTableAccordionGroup>
State managed without children
import manageState from 'manage-state';
const ManagedCompactTableAccordionGroup = manageState(CompactTableAccordionGroup, {
propsToState: ['open'],
});
<ManagedCompactTableAccordionGroup title="Title" expanded="expanded"/>
Toggle open on title click with 'changeOnTitleClick' prop
import manageState from 'manage-state';
const ManagedCompactTableAccordionGroup = manageState(CompactTableAccordionGroup, {
propsToState: ['open'],
});
<ManagedCompactTableAccordionGroup changeOnTitleClick title="Title" expanded="expanded">
Children
</ManagedCompactTableAccordionGroup>
Array
import manageState from 'manage-state';
const arrayExampleItems = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
const ManagedCompactTableAccordionGroup = manageState(CompactTableAccordionGroup, {
propsToState: ['open'],
});
<ManagedCompactTableAccordionGroup
expanded={
arrayExampleItems.map((item, index) => {
if (index) {
return <div>{item}</div>;
}
return null;
})}
>
{arrayExampleItems[0]}
</ManagedCompactTableAccordionGroup>
TODO:
- Implement Async story example in CodeSandbox
Properties
Prop | Required | Default | Type | Description |
---|---|---|---|---|
changeOnTitleClick | false | bool | ||
children | undefined | node | ||
expanded | true | | node | ||
onChange | | func | |||
open | false | bool | ||
title | | node |