react-accordion-component

1.0.10 • Public • Published

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

Package Sidebar

Install

npm i react-accordion-component

Weekly Downloads

5

Version

1.0.10

License

MIT

Last publish

Collaborators

  • saulecabrera