React Accordeon

React Accordeon component with expand/collapse CSS animation. The event trigger can be configured to any component, such in the Navigation and Content

• Components

  • <Accordeon>
  • <Panel>
  • <Nav>
  • <Content>

• Examples

• Todo

  ## Components

  ### <Accordeon> Primary component of React Accordeon. It keeps and handles the state of all the elements.

  #### Props ##### header (optional) A valid React component that will be rendered in a <header> html tag. This component will be provided with the two property functions expandAll and collapseAll.

  ##### footer (optional) A valid React component that will be rendered in a <footer> html tag. This component will be provided with the two property functions expandAll and collapseAll.

  #### Example

  import Header from './Header.js';
  import Footer from './Footer.js';
  <Accordeon header={<Header />} footer={<Footer />}>

  ### <Panel> The Panel component is the container for each element in the accordeon. This will create the collapse/expand animation for the Content component.

  #### Props ##### expanded (optional) Boolean value to configure an initial state for the Panel. If true, the Panel is expanded. If false, the Panel is collapsed.

  #### Example #####Item expanded

  <Panel key="panel1" expanded>

  #####Item collapsed

  <Panel key="panel1" expanded={false}>

  or the expanded property can also be omitted

  <Panel key="panel1">

  ### <Nav> This component accepts any string or any valid React component to render the Panel Header.

  #### Props This does not require any property at this moment.

  ### <Content> Any string, html tag, or a valid React component

  #### Props This does not require any property at this moment.

  ## Examples Accordeon with plain strings in the Nav and Content

  import React, { PropTypes } from 'react';
  import { Accordeon, Panel, Nav, Content } from 'react-accordeon';
  function ExampleOne(props) {
    return (
      <Accordeon>
        <Panel key="panel1">
          <Nav>Question 1</Nav>
          <Content>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </Content>
        </Panel>
        <Panel key="panel2">
          <Nav>Question 2</Nav>
          <Content>
            And more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </Content>
        </Panel>
      </Accordeon>    
      );
  }

  Demo

  Given valid React Components

  import React, { PropTypes } from 'react';
  import { Accordeon, Panel, Nav, Content } from 'react-accordeon';
  import AnotherReactComponentNav from './Another-react-component-nav.js';
  import AnotherReactComponentContent from './Another-react-component-content.js';
  function ExampleOne(props) {
    return (
      <Accordeon>
        <Panel key="panel1">
          <Nav><AnotherReactComponent /></Nav>
          <Content>
            <AnotherReactComponentContent />
          </Content>
        </Panel>
      </Accordeon>    
      );
  }
   
  // A valid React stateless Component (AnotherReactComponentNav.js)
  // We can configure the 'toggle' trigger in any React supported event (onClick={toggle})
  import React, { PropTypes } from 'react';
  const AnotherReactComponentNav = (props) => {
    const { expanded, toggle } = props;
    return (
      <h2>
        {expanded ? '-' : '+'}
        <button
          onClick={toggle}
          aria-expanded={expanded}
          role="tab"
        >
          Question 1
        </button>
      </h2>
    );
  };
   
  AnotherReactComponentNav.propTypes = {
    toggle: PropTypes.func,
    expanded: PropTypes.bool,
  };
   
  export default Nav;
   
  // A valid React stateless Component (AnotherReactComponentContent.js)
  import React, { PropTypes } from 'react';
  const Content = (props) => {
    const { expanded, toggle } = props;
    return (
      <div>
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
      </div>
    );
  };
   
  Content.propTypes = {
    toggle: PropTypes.func,
    expanded: PropTypes.bool,
  };
   
  export default Content;

  Demo

  With some valid HTML

  import React from 'react';
  import { Accordeon, Panel, Nav, Content } from 'react-accordeon';
  function ExampleOne(props) {
    return (
      <Accordeon>
        <Panel key="panel1">
          <Nav>Item 1</Nav>
          <Content>
            <img src="https://placekitten.com/g/500/500" alt="kitten" />
          </Content>
        </Panel>
      </Accordeon>    
      );
  }

  Demo

  Accordeon with Header and Footer

  import React from 'react';
  import { Accordeon, Panel, Nav, Content } from 'react-accordeon';
  import Header from './Header';
  import Footer from './Footer';
  import NavComponent from './NavComponent';
  import ContentComponent from './ContentComponent';
  <Accordeon header={<Header />} footer={<Footer />}>
    <Panel key="panel1">
      <Nav>Question 1</Nav>
      <Content>
        <div>
          <img src="https://placekitten.com/g/500/500" alt="kittlen" />
        </div>
      </Content>
    </Panel>
    <Panel key="panel2" expanded>
      <Nav><NavComponent /></Nav>
      <Content><ContentComponent /></Content>
    </Panel>
  </Accordeon>
   
  // The Header must be a valid React component (Header.js).
  // Two functions are passed as properties: expandAll, collapseAll
  import React from 'react';
  const Header = (props) => {
    const { expandAll, collapseAll } = props;
    return (
      <div>
        <button onClick={expandAll}>Expand All</button> / <button onClick={collapseAll}>Collapse All</button>
      </div>
    );
  };
   
  Header.propTypes = {
    expandAll: React.PropTypes.func,
    collapseAll: React.PropTypes.func,
  };
   
  export default Header;
   
  // The Footer must be a valid React component (Footer.js).
  // Two functions are also passed as properties: expandAll, collapseAll
  import React from 'react';
  const Footer = (props) => {
    const { expandAll, collapseAll } = props;
    return (
      <div>
        <span onClick={expandAll}>Expand All</span> / <span onClick={collapseAll}>Collapse All</span>
      </div>
    );
  };
   
  Footer.propTypes = {
    expandAll: React.PropTypes.func,
    collapseAll: React.PropTypes.func,
  };
   
  export default Footer;

  Demo

  Nested Accordeons Demo

  ## Todo

  • Header and Footer error handling
  • Expand/Collapse one Panel at a time