sparebankenvest / react-css-collapse Goto Github PK

View Code? Open in Web Editor NEW

37.0 36.0 16.0 4.18 MB

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

License: MIT License

JavaScript 96.01% CSS 3.99%

react-css-collapse's Introduction

react-css-collapse

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

Example

Accordion using react-css-collapse

Install

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 🎆

react-css-collapse's People

Contributors

Stargazers

Watchers

Forkers

tobiasla eaardal tonyhopland mshwery c624ds0 torleifhalseth deshiknaves sparebank1 prabuvenkat fgreinus yanghuiqi cdeutsch rcarle3911 droid95 birea jeysef

react-css-collapse's Issues

TypeError: null is not an object (evaluating 'this.content.style')

I'm not sure what is causing this issue specifically only that it happens sporadically.

stacktrace:

webpack:///~/react-css-collapse/lib/components/Collapse.js:99setContentStyleProperty

  }, {
    key: 'setContentStyleProperty',
    value: function setContentStyleProperty(property, value) {
      this.content.style[property] = value;
    }
  }, {
    key: 'setCollapsed',

webpack:///~/react-css-collapse/lib/components/Collapse.js:104setCollapsed

}, {
   key: 'setCollapsed',
   value: function setCollapsed() {
     this.setContentStyleProperty('height', '0px');
     this.setContentStyleProperty('overflow', 'hidden');
   }
 }, {

overflow:'hidden' on the first render when isOpen = true

Hi! It seems like this problem appears again. Here is a small example https://codesandbox.io/s/naughty-lederberg-ngz5t

Create a CONTRIBUTE document

The repo should have a contribute document documenting how one should contribute to this projects. PRs, tests, etc.

Replace test environment with Jest

Chai, Sinon and other test related things should be replaced with Jest

`overflow: hidden` should be removed after initial render when `isOpen={true}`

First off thanks for this component – came in handy in a pinch.

I have children components that have dropdowns that might spill over beyond the <Collapse /> parent component's height. The problem I'm encountering only happens when the initial render has isOpen={true}.

The inline style overflow: hidden is applied and remains on the component until you switch the state from isOpen={false}. In fact, once you toggle it yet again to isOpen={true} after being in the isOpen={false} state it does remove the overflow: hidden style with overflow: visible, which is what my child components require after the animation is complete.

Update peer dependencies of react & react-dom to v16.1.1?

can you update react to use the latest version 16

Collapse initialized with "isopen = true" does not render as open

Collapse components initialized with isOpen=true are rendered as closed, and only changes once the props are updated by setState.

ComponentWillReceiveProps warning after upgrade to React 16.9.0

After upgrade to React 16.9.0, React prints console warning because react-css-collapse still uses componentWillReceiveProps life-cycle method. This method will be removed in React 17.0.0.
Would you please rewrite the code to make it work after React 17.0.0 release?
Thank you!

Transition height on Collapse when it is open and the content changes

Would love a way to forceMeasure boolean prop to force measuring the content with each height.

Currently a change in the content's height would not update the height.

Possibility to specify CSS transition as component property

Thank you for this component. It work's quite well :).

However, I have an idea for improvement: Right now it is required to specify the className to set the desired CSS transition. While this might be fine for most use cases, because most people should have some kind of CSS-in-JS solution or a bundler in use anyway, it is also somewhat limiting. In my opinion it would be very handy, if the transition could also be set directly as Component property. This way users are not forced to use some library to inject the styles into the HTML or to do this manually.

Example:

<Collapse isOpen={isOpen} transition="height 250ms cubic-bezier(.4, 0, .2, 1)">
   <div>foo</div>
</Collapse>

Moreover it might be a good idea to offer a reasonable default transition (could be the default value of this potentially new component property). I was confused first, because the element collapsed without an animation. I think you should make it clearer in the README, that it is required to define a CSS transition first to make the animation work.