react-collapse

Fast and reliable React collapse component used for showing and hiding content on the screen. The idea behind @devlazarevic/react-collapse is to bring collapse functionality to you with clean API so you can bootstrap your application without worrying how it will fit in your UI design, since the component only applies inline styles necessary for the proper functionality, the component look is left to you to style.

Installation

npm i @devlazarevic/react-collapse

or

yarn add @devlazarevic/react-collapse

Example

import React from 'react';
import ReactDOM from 'react-dom'
import Collapse from '@devlazarevic/react-collapse';

function App(props) {
  return (
    <React.Fragment>
      <Collapse expanded={true} persist={true}>
        <Collapse.Summary>
          <span>Section 1</span>
        </Collapse.Summary>
        <Collapse.Details>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.</p>
        </Collapse.Details>
      </Collapse>
      <Collapse duration={500}>
        <Collapse.Summary>
          <span>Section 2</span>
        </Collapse.Summary>
        <Collapse.Details>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.</p>
        </Collapse.Details>
      </Collapse>
      <Collapse disabled={true}>
        <Collapse.Summary>
          <span>Section 3</span>
        </Collapse.Summary>
        <Collapse.Details>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.</p>
        </Collapse.Details>
      </Collapse>
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

Demo

Basic accordion

Expandable Table

Navigation Menu

Properties

<Collapse>

| Property | Type | Options | Default | Description | |--|--|--|--|--| | as | string | ['div', 'li', 'dl', null] | div | Details | | expanded | boolean | [true, false] | false | Controls the initial state of the details. | | className | string | - | summary | CSS classes applied to the root component defined under as property. | | duration | [string, number] | - | 200 | Duration of the CSS transition. | | transition | string | - | height 200ms ease-in | Inline transition applied to the root element. | | persist | boolean | [true, false] | false | Determines whether the content should not be removed after collapsing. | | disabled | boolean | [true, false] | false | Determines whether the component is disabled or not.| | children | node | [<Collapse.Summary>, <Collapse.Details>] | - | - | | afterExpand | function | - | - | Callback function executed right after component expand. | | afterCollapse | function | - | - | Callback function executed right after the component collapse. | | onInit | function | - | - | Callback function executed when component mounts. |

<Collapse.Summary>

| Property | Type | Options | Default | Description | |--|--|--|--|--| | as | string | ['div', 'tr', 'dt', 'button'] | div | Details | | innerRef | [function, object] | - | - | Details | | onKeyDown | function | - | - | Callback function executed on the key down event dispatched at the root element. | | className | string | - | collapse__summary | CSS classes applied to the root component defined under as property. | | children | [node, function] | - | - | - |

<Collapse.Details>

| Property | Type | Options | Default | Description | |--|--|--|--|--| | as | string | ['div', 'tr', 'dd'] | div | Details | | colspan | [string, number] | - | 1 | A number of columns that the panel contains when the root is set to tr. | | innerRef | function | - | - | Callback function executed when the ref is bound to the moving panel. | | className | string | - | collapse__details | CSS classes applied to the root component defined under as property. | | children | [node, function] | - | - | - |

Change Log

0.0.6

• Fixed wrong default class name for <Collapse.Summary> component.

0.0.5

• Removed controls property from <Collapse.Summary>.
• Added id property required by A11Y Disclosure.
• Added role="button" to the <Collapse.Summary>` component.
• Updated documentation.

0.0.4

• Added default CSS classes using the BEM convention. collapse collapse__summary and collapse__details
• Fixed documentation misspells.
• Added callback function onInit executed inside Collapse componentDidMount cycle method.

0.0.3

• Fixed missing className property on the root <Collapse> component.
• Fixed misspelled aria-labelledby property on <Collapse.Details> component.
• Added Codesandbox Demos.
• Summary children now receive expanded state as the first parameter instead of the summary reference.
• Details component now accepts a function as children. The function receives expanded state as the first parameter.

0.0.2

• Introduces <Collapse.Summary> and <Collapse.Details> child components for content separation and more control over collapse heading and body.
• Removed ignoreInlineStyles property.
• Improved documentation.
• Removed beforeExpand and beforeCollapse properties.
• Added initial A11Y support.

0.0.1

• Initial Release

Notes

1. When you specify <Collapse> as null it gets replaced by React.Fragment which does not accept className and because of that, default "collapse" or any custom class will not be applied. If you styled collapse component using css nesting like .collapse .collapse__summary or .collapse .collapse__details make sure to fix it.

2. Even though the <Collapse> id property is not required, for accessibility purposes specify unique id which will be passed to the <Collapse.Summary> as aria-controls and to the <Collapse.Details> as id. This might change into required prop in the future releases.

License

Copyright 2019 Stefan Lazarevic

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.