sunset-home-office-working-with-laptop-on-the-garden-picjumbo-com

React / Redux Accordion

Get the code: Github Repo

I needed a lightweight (no 3rd party libs) and reusable Accordion React component that could have a single or multiple instances running at one. Finally it needed to be able to be controlled by either a local component state, redux store or both simultaneously…

The project has now been open sourced, get the code here :
Github repo

Redux Accordion is a fully featured accordion component, built using react/redux with ECMAScript 6. Simple to set up, simple to use and most importantly hopefully as simple as possible to maintain and build upon.

Usage

Redux accordion uses a redux store to manage its state, a maintainable way to handle your state objects. However if you would like to use the component version (or within a pure React build) you can use the redux-accordion-component version within the /src.

Installation for redux-accordion-component

* Clone / Download this repo.
* Move /src/redux-accordion into your project.
* Include Accordion & AccordionSection
* Done

Installation for redux-accordion

* Clone / Download this repo.
* Move /src/redux-accordion into your project.
* Connect the actions and reducer into your app.
* Add the main.css to your styles
* Done. Accordions for everyone :)

!important for redux-accordion: make sure you connect your actions and reducer!

How to setup:
1) Import or require /index.js (or just the folder)
2) Add an accordion section and pass the props.

1
2
3
4
5
6
7
<Accordion
  {...this.props}
  uniqId={'testAccordion'}>

  {*/ Content Goes Here /*}

</Accordion>

* The uniqId specifies how this instance is referenced in the reducer (non-component version)
* You can set `singleOpen={true}` if you want to limit the accordion to only open a single section at a time
* You can set `openByDefault={true}` if you want to accordion to be open by default

3) Add your sections…

1
2
3
4
<AccordionSection
 title="Section 1">
 {*/ Content Goes Here /*}
</AccordionSection>

* The title dictates what is displayed on the accordion bar
* You can set `openByDefault={true}` if you want this section to be open by default

4) Add your content.

5) Serve compiled and enjoy 😉

100% Open Source

Check it out on github

Any questions or suggestions? Tweet to @reduxaccordion

Rory K

Rory Kermack is a professional programmer, interactive designer, and entrepreneur. Working with the #iot, #hybridapps, #webrtc & #reactjs. Senior dev & main contributor of codeanthology.