legit-accordion
v0.0.3
Published
A simple React accordion component based on Thoughtbots Refills accordion
Downloads
4
Readme
#accordion
A simple React accordion component based on Thoughtbots Refills accordion component
##Install
npm install legit-accordion --save
##Example
import { Accordion, AccordionItem } from 'legit-accordion';
// Import the default styling.
require('legit-accordion/lib/default');
export default class Component extends React.component {
render() {
return (
// Optionally specificy an accordion element by name to be active. If
// left out, all accordions will be closed
<Accordion active='Item 1'>
<AccordionItem name='Item 1'>
<p>This is an accordion item. The first.</p>
</AccordionItem>
<AccordionItem name='Item 2'>
<p>This is another accordion item. The second.</p>
</AccordionItem>
</Accordion>
)
}
}
If you'd like to override the HTML that is displayed on the closed accordion
you can use the labelHTML
prop:
<AccordionItem name='Item 1' labelHTML={<span>Item 1</span>}>
<p>This is an accordion item with a fancy label</p>
</AccordionItem>
That's it! The caveat here is that the open and close animations depend on the
max-height
property, which is by default set to 500px. If your content is going
to be taller than that, you can override this:
.accordion .is-expanded > div.content {
max-height: 1000px;
}