@govuk-frederic/table-accordion-group

Accordion menu which uses manage-state and react-collapse.

Stats

StarsIssuesVersionUpdatedCreatedSize
@govuk-frederic/table-accordion-group
0.2.03 years ago3 years agoMinified + gzip package size for @govuk-frederic/table-accordion-group in KB

Readme

TableAccordionGroup

Import

  import TableAccordionGroup from '@govuk-frederic/table-accordion-group';

Usage

State managed with children

import manageState from 'manage-state';

const ManagedTableAccordionGroup = manageState(TableAccordionGroup, {
  propsToState: ['open'],
});

<ManagedTableAccordionGroup title="Title" expanded="expanded">
  Children
</ManagedTableAccordionGroup>

State managed without children

import manageState from 'manage-state';

const ManagedTableAccordionGroup = manageState(TableAccordionGroup, {
  propsToState: ['open'],
});

<ManagedTableAccordionGroup title="Title" expanded="expanded"/>

Toggle open on title click with 'changeOnTitleClick' prop

import manageState from 'manage-state';

const ManagedTableAccordionGroup = manageState(TableAccordionGroup, {
  propsToState: ['open'],
});

<ManagedTableAccordionGroup changeOnTitleClick title="Title" expanded="expanded">
  Children
</ManagedTableAccordionGroup>

Array

import manageState from 'manage-state';

const arrayExampleItems = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

const ManagedTableAccordionGroup = manageState(TableAccordionGroup, {
  propsToState: ['open'],
});


<ManagedTableAccordionGroup
  expanded={
  arrayExampleItems.map((item, index) => {
    if (index) {
      return <div>{item}</div>;
    }
    return null;
  })}
>
  {arrayExampleItems[0]}
</ManagedTableAccordionGroup>

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.