Accordion

An accordion allows users to expand and collapse sections of content.

Default

By default, accordions allow only one section to be expanded at any time.

Multiple sections open

Accordions can also be configured to allow multiple sections to be expanded simultaneously.

Readme

Installation

npm install bpk-component-accordion --save-dev

Usage

withSingleItemAccordionState(BpkAccordion)

The withSingleItemAccordionState higher-order component is used to limit one section to be expanded at any time.

import React from 'react';
import { BpkAccordion, BpkAccordionItem, withSingleItemAccordionState } from 'bpk-component-accordion';

const SingleItemAccordion = withSingleItemAccordionState(BpkAccordion);

export default () => (
  <SingleItemAccordion>
    <BpkAccordionItem id="stops" title="Stops">
      My stops content.
    </BpkAccordionItem>
    <BpkAccordionItem id="departure-times" title="Departure times" initiallyExpanded>
      My departure times content.
    </BpkAccordionItem>
    <BpkAccordionItem id="journey-duration" title="Journey duration">
      My journey duration content.
    </BpkAccordionItem>
  </SingleItemAccordion>
)
withAccordionItemState(BpkAccordionItem)

The withAccordionItemState higher-order component is used to allow multiple items to be expanded simultaneously.

import React from 'react';
import { BpkAccordion, BpkAccordionItem, withAccordionItemState } from 'bpk-component-accordion';

const StatefulAccordionItem = withAccordionItemState(BpkAccordionItem);

export default () => (
  <BpkAccordion>
    <StatefulAccordionItem id="stops" title="Stops">
      My stops content.
    </StatefulAccordionItem>
    <StatefulAccordionItem id="departure-times" title="Departure times" initiallyExpanded>
      My departure times content.
    </StatefulAccordionItem>
    <StatefulAccordionItem id="journey-duration" title="Journey duration" initiallyExpanded>
      My journey duration content.
    </StatefulAccordionItem>
  </BpkAccordion>
)

Props

BpkAccordion
PropertyPropTypeRequiredDefault Value
childrennodetrue-
classNamestringfalsenull
BpkAccordionItem
PropertyPropTypeRequiredDefault Value
idstringtrue-
titlestringtrue-
childrennodetrue-
expandedboolfalsefalse
onClickfuncfalse() => null
tagNamestringfalsespan
withSingleItemAccordionState(BpkAccordion)
PropertyPropTypeRequiredDefault Value
expanded initiallyExpandedboolfalsefalse
withState(BpkAccordionItem)
PropertyPropTypeRequiredDefault Value
expanded initiallyExpandedboolfalsefalse

Theme Props

  • accordionColor,
  • accordionHoverColor,
  • accordionActiveColor,