ematipico/redux-accordion

A reusable and customisable accordion component for react/redux

Redux Accordion

Need an accordion for your React and/or Redux project? Look no further. You can have a single or multiple instances running at one. 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.

Installation

npm install redux-accordion

Example

<Accordion
  {...this.props}
  uniqId={'testAccordion'}>

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

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

</Accordion>

Usage

Redux accordion uses a redux store to manage its state. However it also has the option to use local component state.

With the local component state option you can simply run npm install redux-accordion, include Accordion & AccordionSection and your good to go. The second requires you to hook up the actions and reducers to your app.

Sections:

Accordion

<Accordion
  {...this.props}
  uniqId={'testAccordion'}
  singleOpen={true}>

  {*/ Content Goes Here /*}

</Accordion>

• You can set the uniqId if you want to apply an id to your accordion. This also 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

AccordionSection

<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
  

Installation with redux actions & stores

• Clone git repo or run npm install redux-accordion
  
• Connect the actions and reducer into your app (node_modules/redux-accordion/redux)
  
• Include Accordion & AccordionSection.
• Done. Accordions for everyone :)
  

Contributing

Everyone brings something awesome to the party so please contribute. If you have any suggestions give a shout on twitter to @reduxAccordion

1. Fork it!
   
2. Create your feature branch: git checkout -b my-new-feature
   
3. Commit your changes: git commit -am 'Add some feature'
   
4. Push to the branch: git push origin my-new-feature
   
5. Submit a pull request :D
   

Credits

Created and maintained by @rorykermack

License

WTFPL (100% Open Source)