@devlazarevic/react-collapse v0.0.6
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
andcollapse__details
- Fixed documentation misspells.
- Added callback function
onInit
executed inside CollapsecomponentDidMount
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
andbeforeCollapse
properties. - Added initial A11Y support.
0.0.1
- Initial Release
Notes
When you specify
<Collapse>
asnull
it gets replaced byReact.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.Even though the
<Collapse>
id
property is not required, for accessibility purposes specify unique id which will be passed to the<Collapse.Summary>
asaria-controls
and to the<Collapse.Details>
asid
. 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.