sparebankenvest / react-css-collapse Goto Github PK
View Code? Open in Web Editor NEWComponent-wrapper for collapse animation with css for elements with variable and dynamic height
License: MIT License
Component-wrapper for collapse animation with css for elements with variable and dynamic height
License: MIT License
Hi! It seems like this problem appears again. Here is a small example https://codesandbox.io/s/naughty-lederberg-ngz5t
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.
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!
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');
}
}, {
Chai, Sinon and other test related things should be replaced with Jest
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.
can you update react to use the latest version 16
The repo should have a contribute document documenting how one should contribute to this projects. PRs, tests, etc.
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.
Collapse components initialized with isOpen=true
are rendered as closed, and only changes once the props are updated by setState.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.