Skip to content

jforaker/react-accordion-with-header

Repository files navigation

react-accordion-with-header

React accordion component with customizable flexbox header

NPM

jforaker

"You've got 5 seconds... and 3 are up." - Steven Seagal

Install via NPM:

npm install react-accordion-with-header

Import the modules:

import {
  AccordionWithHeader,
  AccordionNode,
  AccordionHeader,
  AccordionPanel
} from 'react-accordion-with-header';

Items can be passed in to <AccordionHeader /> and <AccordionPanel />:

  • as children (preferred)
  • as a component passed into the template prop (deprecated)

The elements passed in to <AccordionHeader /> can be horizontally justified and vertically aligned via their respective props :tada: :boom: :beers:

  • horizontalAlignment
  • verticalAlignment

Pass in a component as a child to AccordionHeader and AccordionPanel:

(or plain html of course)

// note: due to the warning "Stateless function components cannot be given refs. Attempts to access this ref will fail."
// the components passed into <AccordionPanel> must be class components
// this allows to measure the height of the element via refs
class BodyTpl extends React.Component {
  render() {
    return <div>Look at this {this.props.item}</div>;
  }
}

class MyAccordion extends React.Component {
  render() {
    return (
      <AccordionWithHeader>
        {[1, 2, 3, 4].map((item, i) => {
          return (
            <AccordionNode key={i}>
              <AccordionHeader
                horizontalAlignment="centerSpaceAround"
                verticalAlignment="center"
              >
                <div>This is the header</div>
                <div>It has flexbox layout</div>
              </AccordionHeader>
              <AccordionPanel>
                <BodyTpl item={item} />
              </AccordionPanel>
            </AccordionNode>
          );
        })}
      </AccordionWithHeader>
    );
  }
}

actionCallback


  actionCallback = (panels, state) => {
    // fires any time headers are clicked and panels change state
    // receives array of panels: [{ panel: 3, open: true }, { panel: 6, open: true }]
    // and the AccordionWithHeader state
    console.log('panels, state', panels, state);
  }

  render() {
    return (
      <AccordionWithHeader actionCallback={this.actionCallback}>
        // ... stuff
      </AccordionWithHeader>
    );
  }

Props

(all components accept a className and style prop per usual convention)

<AccordionWithHeader />

Property Type Description Default
firstOpen Boolean Determines if the first panel should be expanded on init false
active Array Determines which panels are open (on componentDidMount or to control externally) []
multipleOkay Boolean True allows multiple panels to be expanded at the same time. False allows only one panel to be expanded at any time. false
actionCallback Function Callback function fired when a header is clicked and panel is opened or closed. Returns an array representing panels and the AccordionWithHeader state none
style Object style object none
className String CSS classname none

<AccordionNode />

Property Type Description Default
style Object style object none
className String Custom classname applied to root item div none

<AccordionHeader />

Property Type Description Default
title String For simple headers, a title will render an <h1> and disallow child elements none
titleColor String some valid CSS color or rgb or hex black
horizontalAlignment String One of: 'centerSpaceBetween', 'spaceBetween', 'centerSpaceAround', 'spaceAround', 'spaceEvenly', 'center', 'left', 'right'. Maps to corresponding flex-box CSS property centerSpaceAround
verticalAlignment String One of: 'top', 'center', 'bottom' center
style Object style object none
className String CSS classname none
template Element Component to be rendered as a template none

<AccordionPanel />

Property Type Description Default
template Element Component to be rendered as a template none
speed Number Speed in milliseconds to apply to CSS transition of open/close effect 250
style Object style object none
className String CSS classname none

What about styling?

You can styles to any component with a style prop or className prop

For example: <AccordionHeader style={{border: '1px solid'}}>

Or: <AccordionHeader className="myCssClass">