A reusable and customisable accordion component for react/redux
JavaScript Other
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
compiled
redux
src
.babelrc
.eslintrc
.gitignore
App.js
LICENSE
README.md
gulpfile.bak.js
gulpfile.js
index.html
index.js
main.js
notes.txt
package.json
readme-header.jpg
webpack.config.js

README.md

Redux Accordion Header Image

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)