react-collapser
🏄♂️ React-Collapser
Easy, fast and lightweight React collapse component for your <App />
Fully controlled, zero dependencies, works out of the box, has advanced features.
Made with functional components, hooks and latest React.
Install
yarn add react-collapser
npm i react-collapser
Usage
import * as React from 'react'
import { Collapser, Trigger, Panel } from 'react-collapser'
<Collapser>
<Trigger>About dogs</Trigger>
<Panel>
A dog is a type of domesticated animal. Known for its
loyalty and faithfulness, it can be found as a welcome guest
in many households across the world.
</Panel>
</Collapser>
If you need default styles for collapser:
import 'react-collapser/dist/default-styles.css'
All possible variations of use on storybook
Why
Average size of most popular accordion packages are between 6.9 - 44.3kb (minified).
Most of their features are not in demand. Made with oldfashion classes.
Examples
Features
- Working out of the box
- Controlled/Uncontrolled by demand
- Unlimited nesting
- Only useful properties
- Unlimited styling in a way you need
- Default styles in external .css file
- SSR friendly, tested by Gatsby
- Basic WAI-ARIA atributes for accessibility
- Zero dependencies
- 🌳Tree-Shakeable
API
Collapser
| Property | Description | Type | Default |
|---|---|---|---|
| alwaysOpen | Collapser have first always opened panel | Boolean | false |
| alwaysOpen | Collapser have one always opened panel | Number | 0 |
| reveal | Reveal all nested panels and triggers | Boolean | false |
| controlled | Collpaser becomes fully controlled by this prop | Boolean | false |
| animated | Initiate default animation | Boolean | false |
| disabled | Disable whole collapser | Boolean | false |
| onChange | Return state of collapser | Event | {activeIndex} |
Trigger / Panel
| Property | Description | Type | Default |
|---|---|---|---|
| controlled | Panel or Trigger component becomes fully controlled | Boolean | false |
| disabled | Disable Trigger and linked to this Panel component | Boolean | false |
Development
yarn start - run Storybook for development on http://localhost:7000
yarn build - run Rollup to compile production build
yarn story - build Storybook for development
Made with:
https://github.com/toastyboost/storybook-starter
https://github.com/toastyboost/rollup-boilerplate
TODO
- add tests
- add typescript
- resolve case with childs between trigger and panel
- link features and story book
- add gifs to most important features
- add star motivation
- add knobs
- remove antd
- add Docs addon to storybook
- add labels in titles to duplicate states
- add links from props table to storybook
- add eslint ignore
- auto copy styles to dist while build
- tab option to ignore click on same tab
- bug with 0 always open child
- add github actions
- add deploy storybook
- add to npm