Skip to content

emilpalsson/react-tiny-accordion

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tiny, super simple accordion for React · npm npm bundle size (minified + gzip)

Fully responsive, no resize event listeners, no dependencies, minimal markup, <80 LOC.

Demo

Codesandbox demo

Codesandbox

Installation

npm install react-tiny-accordion

Usage

import Accordion from 'react-tiny-accordion'

<Accordion className='accordion'>
    <div data-header="Title can be string literals">
        Content 1
    </div>
    <div data-header={<OrComponents />}>
        Content 2
    </div>
</Accordion>

Add some styling

.accordion {
  border-bottom: 1px solid #999;
}

/* Header */
.accordion > div > div:first-of-type {
  border: 1px solid #999;
  border-bottom: 0;
  padding: 1em;
  background-color: #eee;
}

/* Content */
.accordion > div > div:last-of-type {
  border-left: 1px solid #999;
  border-right: 1px solid #999;
}

Protip: Check the Codesandbox demo for a more complete styling example.

Props

Prop Description Default
transitionDuration Duration of expand/collapse transition. 500
transitionTimingFunction Speed curve of the transition, can be any valid CSS transition timing function. 'ease'
openClassName The CSS class that should be applied to the currently expanded item. 'open'
selectedIndex Toggling an item can also be done via props.
onChange Event triggered when the user toggle an item, args: index, expanded, selectedIndex.
changeOnClick Set this to false if you only want to expand items via the selectedIndex prop. true