Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-css-collapse

Package Overview
Dependencies
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-css-collapse

Component-wrapper for collapse animation with css for elements with variable and dynamic height

  • 4.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

react-css-collapse

Collapse component with css transition for elements with variable and dynamic height.

Build Status npm version npm downloads

Example

Accordion using react-css-collapse

Install

rc-collapse

Support

Global coverage > 92% - browserl.ist

Usage

import Collapse from 'react-css-collapse';

<Collapse isOpen={true || false}>
  <div>content</div>
</Collapse>

Properties

isOpen: PropTypes.boolean

Expands or collapses content.

children: PropTypes.node
<Collapse isOpen={true}>
  <p>Paragraph of text</p>
  <p>Another paragraph is also OK</p>
  <p>Images and any other content are ok too</p>
  <img src="cutecat.gif" />
</Collapse>
className: PropType.string

Specify transition using the class selector with transition or the style property. The react-css-collapse-transition class selector is added by default unless you specify your own.
The default transition can be overridden using the transition prop, or with custom styling 👇. Note: replace the selector with your selector if you have specified a different className.

.react-css-collapse-transition {
  transition: height 250ms cubic-bezier(.4, 0, .2, 1);
}
onRest: PropTypes.func

Callback function for when your transition on height (specified in className) is finished. It can be used to trigger any function after transition is done.

ARIA and data attributes

Collapse transfers aria- and data- attributes to the component's rendered DOM element. For example this can be used to set the aria-hidden attribute:

<Collapse isOpen={isOpenState} aria-hidden={isOpenState ? 'false' : 'true'}>
  <p>Paragraph of text</p>
</Collapse>

Development and testing

To run example covering all features, use npm run storybook.

git clone [repo]
cd [repo]
npm install
npm run storybook

Open http://localhost:6006 🎆

Keywords

FAQs

Package last updated on 24 Aug 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc