Simple React Accordion

A simple React accordion component that takes an array of JavaScript objects and processes it into a responsive accordion element.

Very simple, easy to implement, and features 5 pre-built themes.

View demo page here

#Installation

Install with npm

npm install simple-react-accordion --save

or install with Yarn

yarn add simple-react-accordion

How to use

Import the module in your React app.

import SimpleAccordion from 'simple-react-accordion';

Define your accordionItems either as a state or variable.

/// Using state
class App extends Component {
  constructor() {
    super();

    this.state = {
      accordionItems: [
        {
          header: "This is the 1st item.",
          content: "Some content."
        },
        {
          header: "This is the 2nd item.",
          content: "Some more content."
        },
        {
          header: "This is the 3rd item.",
          content: "Even some more content!"
        }
      ]
    }
  }
}

Invoke the component with your items.

render() {
  return(
    <div className="container">
      <SimpleAccordion 
        theme="professional"
        items={this.state.accordionItems}
      />
    </div>
  )
}

Preview

Theme used in photo is professional.

Properties

Property | type | Options | Default | Description --- | --- | --- | --- | --- | theme | string | basic, minimal, well, professional, dark | basic | Sets the theme style. items | array | | | Array of Objects. Objects require header and content properties.

View Github Repository

Follow the developer on Instagram