react-accordion-components

    1.0.3 • Public • Published

    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

    Install

    npm i react-accordion-components

    DownloadsWeekly Downloads

    3

    Version

    1.0.3

    License

    MIT

    Last publish

    Collaborators

    • cht8687