jforaker / react-accordion-with-header

React accordion component with flexbox header

react-accordion-with-header

React accordion component with customizable flexbox header

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

Check out the demo NOW

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">

---

react-accordion-with-header's Issues

Accordion resets on state change

Hi,

The accordion works great apart from when I want to change the state in my project. Whenever the state is changed (anywhere in the project, not just the accordion), it resets itself by closing all panels.

I have an actionCallback setup for when all panels have been viewed. At the end of this, I want to use setState() but this is where the problem happens. The project has multiple interactions, which trigger other content being revealed. Once the accordion has been viewed, I change the state to do this. When the last panel is clicked on however, the accordion is resetting itself.

accordionChange (panels) {
        let seen = this.state.seen
        panels.forEach((panel, i) => {
            if(panel.open){
                seen[i] = true;   
            } 
        })

        if (seen.every(val => val === true)) {
            this.setState({ seen })
        }
    }

Cannot expand accordions added after componentdidmount

I'm trying to have a accordionWithHeader component that has a changing amount of nodes. The accordions exist in an array/list that can be added to and removed from. They render fine but they do not open/close without leaving the page and forcing the component to unmount and remount.

Auto close of panels when using checkbox field

I have a list of checkbox inside the accordion but whenever i click the checkbox, all panels closes

ReferenceError: document is not defined

Hi,
I found this is a very awesome library but got error when I want to use in React+Meteor Project.

Thank you.