🏄‍♂️ 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

• [x] Working out of the box
• [x] Controlled/Uncontrolled by demand
• [x] Unlimited nesting
• [x] Only useful properties
• [x] Unlimited styling in a way you need
• [x] Default styles in external .css file
• [x] SSR friendly, tested by Gatsby
• [x] Basic WAI-ARIA atributes for accessibility
• [x] Zero dependencies
• [x] 🌳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 build-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