Skip to content
Minimal UI Accordion Component Written In React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
js
jsx
public
.gitignore
README.md
accordion.css
gulpfile.js
package.json

README.md

#React Accordion Component

#Installation

$ npm install react-accordion-component

#Usage To get the basic style of the component, link in your index.html the CSS file for the Accordion:

<link rel="stylesheet" href=/path/to/accordion.css>

(normally located under your node_modules directory)

After that just require the component in the desired place of use:

var Accordion = require('react-accordion-component');

The Accordion accepts an array of objects, where each of them may have:

  • title: title for an accordion element (string)
  • onClick: callback function triggered when an accordion element is clicked (function)
  • content: content for an accordion element (string)

##Example

var elements = [];
elements.push({
    title: 'Element 1',
    onClick: function() {
      alert('Hello World!')
    },
    content: 'Lorem Ipsum...'
  });
  
elements.push({
  title: 'Element 2',
  onClick: function() {
  },
  content: 'Lorem Ipsum...'
});

When rendering (using jsx):

React.render(<Accordion elements={elements} />, document.getElementById('accordion-example'));

##Voilà

Click in the fish eye to exapand/collapse each accordion element.

#Notes In the index.html under examples/ I've used Source Sans Pro font from Google Fonts. Feel free to change the font in accordion.css to your preferred font.

#TODO

  • Add title property to the accordion(e.g. <Accordion elements={elements} title={title} />
  • Add CSS animations
  • Add API to interact with elements
  • (Dev) Improve gulp file tasks

#License MIT

You can’t perform that action at this time.