React Collapsibles

Expand and collapse anything, or groups of anything. Accordions, drop-downs, show/hide, grouped lists, details, etc, etc, etc. Fully accessible, completely faceless. Does not care about the structure of your content, its style, or its markup.

Highlights

• Modular

  Does not care about the structure of your content. Nest CollapsibleContent or CollapsibleToggler anywhere as a descendent of Collapsible. Wrap CollapsibleGroup anywhere as an ancestor to control collectively. Retrofit existing components as-is.

• Accessible

  Shipped fully accessible. CollapsibleContent, CollapsibleToggler strictly follow the WAI-ARIA guidelines on sections with show/hide functionality. You can also customize anything.

• Faceless UI

  Applies no visual style, but encourages you to do so. Target any element and any state without additional legwork. BEM classes come shipped. Transition classes too, using react-transition-group.

• Agnostic DOM

  Take complete control over the DOM. Things like custom markup, accessibility, or additional event handling. Everything beyond core functionality is extendable.

Quick Start

Installation

$ npm i @faceless-ui/collapsibles
$ # or
$ yarn add @faceless-ui/collapsibles

Composition

  import React from 'react';
  import {
    CollapsibleGroup,
    Collapsible,
    CollapsibleToggler,
    CollapsibleContent
  } from '@faceless-ui/collapsibles';

  const App = () => (
    <CollapsibleGroup>
      <Collapsible>
        <CollapsibleToggler>
          ...
        </CollapsibleToggler>
        <CollapsibleContent>
          ...
        </CollapsibleContent>
      </Collapsible>
    </CollapsibleGroup>
  )

  export default App;

For working examples, see the demo app.

Demo

$ git clone git@github.com:faceless-ui/collapsibles.git
$ yarn
$ yarn dev
$ open http://localhost:3000

API

• Collapsible
• CollapsibleContent
• CollapsibleGroup
• CollapsibleToggler
• useCollapsible
• useCollapsibleGroup

Contribution

Help us, or let us help you help us.

License

MIT Copyright (c) TRBL, LLC