React-collapser NPM

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

npm bundle size David

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

react-collapser demo

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}