streakyc / react-smooth-collapse Goto Github PK
View Code? Open in Web Editor NEWReact component for animating showing or hiding an element
License: MIT License
React component for animating showing or hiding an element
License: MIT License
Hey man, I just wanted to say thanks! I've tested this a lot today and it's working absolutely beautifully! Job well done
It would be beneficial ti have a min-height prop so that one could create an effect of not entirely closed content with some fade going on.
I have a use case where max-width of the SmoothCollapse has to be updated dynamically from javascript. Currently I've been using additional div wrapper for children.
<SmoothCollapse expanded={isExpanded}>
<div style={{ maxWidth: calculateMaxWidth() }}>
...
I'd like to be able to control style of the most outer element and drop the need of additional divs.
<SmoothCollapse expanded={isExpanded} style={{ maxWidth: calculateMaxWidth() }}>
Style prop can be merged with SmoothCollapse's internal styles without breaking anything.
Hey,
I just want to say: thank you for creating this project! I use it extensively and I love it, this is by far the best component of this type.
Quick question: would you say that the component is finished and do you plan to add/change something?
I don't know if it's a known issue or if I'm doing something wrong, but the animation is not that smooth on mobile.
Live site: https://www.luismorcilloluque.com/en/skills (check on mobile or reduce the browser window to show the collapse buttons).
It plays reasonable smooth on my MacMini, but not at all on my Xiaomi phone.
The code:
<CollapseButton
title={skills?.name[lang]}
expanded={open}
toggleFunc={toggleOpen}
/>
<SmoothCollapse expanded={open} heightTransition=".5s ease-out">
<div className="justify-center grid gap-2 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 mt-4">
{skills?.data?.map((skill, index) => {
return (
<div key={index} className="items-center ">
<SkillItem nombre={skill.name} puntuacion={skill.level} />
</div>
);
})}
</div>
</SmoothCollapse>
I have a case where I need to collapse from auto
not to 0
but some initial height. Would it not be fun to be able pass collapsedHeight
as props too?
I have noticed your library adds two additional divs to the structure - one animating height
, another setting overflow: hidden
. This is undesired, the effect should be applied directly to the child instead of creating any new parent elements.
It would be great to have display none optional, among other things, this would allow one so achieve #12
It would help styling of the inner component if classnames of the expander were set to collapsed or expanded accordingly.
I noticed it doesn't work for absolute components. Do you have a plan to support it?
Thanks for making the awesome library!
One thing I noticed is that elements inside the collapsible have lower z-indices than anything outside the collapsible. I'm using a dropdown component from semantic-react in a collapsible, and the dropdown gets cutoff by items outside the collapsible. Do you know of a way to force the elements within the collapsible to have a higher z-index?
The component doesn't allow passing additional CSS classes via the className property. This would be very useful! Allowing other props to just pass through (such as aria attributes) would be very nice as well.
Hi, I'm using your excellent library in react/redux/es6. I'm using it basically like in the example, but saving the collapsed state for each entity in the redux store. When it re-renders, it scrolls me to the top (on Chromium and Firefox) and it's a showstopper.
renderFileList(fileList) {
let { entity } = this.props;
let collapsed = entity.file_list_collapse;
return(
<SmoothCollapse expanded={!collapsed}>
{fileList.map( file =>
<li key={file.path} className="file-list-item monospace">
<span className="fa fa-hand-o-right small-info"/>
{file.path}
</li>)}
</SmoothCollapse>
);
}
<a href="#" onClick={e => this.handleToggle(e, entity.isCollapsed)}>Toggle</a>
// (handleToggle fires off the redux action to change isCollapsed)
Can you tell me why this is happening? Am I doing something wrong? How to stop it from doing that? Thanks!
I think overflow:hidden is too restrictive when expansion is finished.
I have inner components like dropdowns (position: absolute) which are forced to be enclosed within the collapse body div.
Of course its needed during transition phase, but maybe it's reasonable to turn overflow:hidden off when expansion finished?
As the title states. I'd be happy to put in a PR given guidance on your preference on allowing just the wrapper's id
to be set, or for any uncaptured props to be assigned to the main <div>
.
As context for this request, we need to assign an id
value to a DOM element (currently an otherwise unnecessary wrapping <div>
) in order to use it as a target of ARIA properties, for accessibility.
Does it also expand dynamic generated content?
That is: children items of a parent items are retrieved from the backend and should then be shown in smooth expandable way.
I get an error message saying, impossible to get property 'collapse Height' of undefined or null reference
Is there any solution for that?
Hi StreakYC,
Thanks for this little nib, it saved my life today :) Would you consider adding opacity transition as well? It would be nice to collapse and fade at the same time.
Cheers.
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.