react-sanfona

React accordion component

Usage

Install via NPM:

npm install react-sanfona

Then:

import { Accordion, AccordionItem } from 'react-sanfona';

…

  render() {
    return (
      <Accordion>
        {[1, 2, 3, 4, 5].map(item => {
          return (
            <AccordionItem title={`Item ${item}`} expanded={item === 1}>
              <div>
                {`Item ${item} content`}
              </div>
            </AccordionItem>
          );
        })}
      </Accordion>
    );
  }

…

options / PropTypes

Accordion

| Property | Type | Description | Default | |:---|:---|:---|:---| | allowMultiple | Boolean | Allow multiple items to be open at the same time. | false | | isHovered | Boolean | Allow expanding an element after the mouse hovers an item. | false | | openNextAccordionItem | Boolean | Opens the next accordion item after the previous one is closed. Defaults first one as active and applies for each accordion item except the last one. | false | | className | String | Custom classname applied to root element | null | | style | Object | Inline styles applied to root element | null | | onChange | Function | Triggered when component updates and passes new state as an argument | null | | rootTag | String | Custom HTML tag used for root element | 'div' | | duration | Number | Open/close transition duration in milliseconds | 300 | | easing | String | Open/close transition easing | 'ease' |

AccordionItem

| Property | Type | Description | Default | |:---|:---|:---|:---| | title | String/ Object | Text or Object to display in header. | null | | expanded | Boolean | If item body should be expanded or not | false | | onExpand | Function | Callback for when item is expanded | null | | onClose | Function | Callback for when item closes | null | | className | String | Custom classname applied to root item element | null | | bodyClassName | String | Custom classname applied to the accordion item body | null | | expandedClassName | String | Custom classname applied when accordion is expanded | null | | titleClassName | String | Custom classname applied to accordion item header text | null | | disabled | Boolean | If item should be disabled or not | false | | disabledClassName | String | Custom classname applied to accordion item header text when item is disabled | null | | rootTag | String | Custom HTML tag used for root element | 'div' | | titleTag | String | Custom HTML tag used for title element | 'h3' | | bodyTag | String | Custom HTML tag used for body element | 'div' | | duration | Number | Open/close transition duration in milliseconds | 300 | | easing | String | Open/close transition easing | 'ease' |

Styling with classnames

| Classname | Targets | |:---|:---| | react-sanfona| Accordion container | | react-sanfona-item | AccordionItem container | | react-sanfona-item-expanded | AccordionItem container when expanded | | react-sanfona-item-title | AccordionItem header text | | react-sanfona-item-body | AccordionItem body container | | react-sanfona-item-body-wrapper | AccordionItem body children wrapper | | react-sanfona-item-disabled | AccordionItem is disabled |

development

npm install

npm start // served on localhost:8080

npm test