Skip to content

React accordion component --- Convert a pair of headers and content panels into an accordion using React, React-motion

License

Notifications You must be signed in to change notification settings

cht8687/react-accordion

Repository files navigation

React Accordion

Gitter

React implementation of Accordion.

Circle CI NPM Version Coverage Status Build Status Downloads Dependency Status License

React Accordion

Philosophy

You don't need jQuery to do this...

Installation

npm

$ npm install --save react-accordion-components

Demo

http://cht8687.github.io/react-accordion/example/

API

<ReactAccordion 
        data={data} 
        options={options}
        headerAttName="headerName"
        itemsAttName="items" 
      />

The component accepts three props.

data: PropTypes.array.isRequired

Render plain object

const DATA = [
  {
    headerName : "Section 1",
    isOpened: true,
    isReactComponent: false,
    items : [{
      paragraph : "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate."
    }],
    height: 100
  }, {
    headerName : "Section 2",
    isOpened: false,
    isReactComponent: false,
    items : [{
      paragraph : "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate."
    }],
    height: 100
  },{
    headerName : "Section 3",
    isOpened: false,
    isReactComponent: false,
    items : [{
      paragraph : "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate."
    }],
    height: 100
  },{
    headerName : "Section 4",
    isOpened: false,
    isReactComponent: false,
    items : [{
      paragraph : "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate."
    }],
    height: 100
  },
];

Render react component

If you want to render a react component, for example, a menu object, you can set isReactComponent to true:

export default class Menu extends React.Component {
  static get menuItems() {
    return [
      {
        headerName: 'Products',
        isOpened: false,
        height: 100,
        isReactComponent: true,
        items: [
          (
          <Link
            to="admin/products/all"
            className="btn btn-default"
            activeClassName="active"
          >
            All
          </Link>
          ),
          (
          <Link
            to="admin/products/expired"
            className="btn btn-default"
            activeClassName="active"
          >
            Expired
          </Link>
          ),
          (
          <Link
            to="admin/products/submitted"
            className="btn btn-default"
            activeClassName="active"
          >
            Submitted
          </Link>
          ),
        ],
      },
      {
        headerName: 'Promotions',
        isOpened: false,
        height: 100,
        isReactComponent: true,
        items: [
          (
          <Link
            to="admin/promotions/active"
            className="btn btn-default"
            activeClassName="active"
          >
            Active
          </Link>
          ),
       ],
      },
      {
        headerName: 'Settings',
        isOpened: false,
        height: 100,
        isReactComponent: true,
        items: [
          (
          <Link
            to="admin/settings/all"
            className="btn btn-default"
            activeClassName="active"
          >
            Al
          </Link>
          ),
        ],
      },
    ];
  }

  render() {
    return (
      <div id="admin-menu">
        <ReactExpandableListView
          data={this.constructor.menuItems}
          headerAttName="headerName"
          itemsAttName="items"
        />
      </div>
    );
  }
}

height controls how much height that certain cell will be look like. This helps you when you have different contents length.

options: PropTypes.object.isRequired

autoClapse indicate if close other section when new section being clicked.

const OPTIONS = {
  autoClapse: true,
}

headerAttName: PropTypes.string.isRequired

variable name of section header in your data object. In above example, it's headerName.

itemsAttName: PropTypes.string.isRequired

variable name which hold items data in your data object. In above example, it's items.

Styling

The CSS is flexible, commented and made to be easily customized.

There is an CSS file in the root level you can include it in your project. CSS code.

Development

$ git clone git@github.com:cht8687/react-accordion.git
$ cd react-accordion
$ npm install
$ webpack-dev-server

Then

open http://localhost:8080/webpack-dev-server/

License

MIT

About

React accordion component --- Convert a pair of headers and content panels into an accordion using React, React-motion

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published