glennflanagan / react-collapsible Goto Github PK
View Code? Open in Web Editor NEWReact component to wrap content in Collapsible element with trigger to open and close.
License: MIT License
React component to wrap content in Collapsible element with trigger to open and close.
License: MIT License
Im using overflowWhenOpen='visible'
on an uncontrolled Collapsible, and it doesn't seem to do anything. It looks like the only reference to this property is when this.props.open
is set. Is this property only supposed to work when the Collapsible is controlled?
Noticed an issue where descendants of a collapsible container with css transitions (in this case a :hover transition) were bubbling up and causing handleTransitionEnd
to fire. Noticed it when my onOpen
handler was getting called a bunch.
Maybe checking the eventtarget
in the handler function for the parent element could be a quick fix?
Thanks for the lib!
Hi Glenn,
Great component, thanks for sharing. In my case I have HTML as the Collapsible content. My trigger is a string, but the content below is HTML via a const, It would be awesome if the HTML could be rendered, rather than just showing the code. Any ideas on how I can make that work?
Thanks!
I know that someone asked if you can use an icon in the trigger property for the Collapsible tag.
But can you combine an image icon and text in the trigger props?
this is what I have currently:
so I can either do this (which displays the "text"
const sectionLabel = props.testResult.name + " - " + props.testResult.result; <Collapsible trigger={sectionLabel}
or I can do this (which displays the icon
const failed = props.testResult.result.toLowerCase() === "failed"; const img = failed ? "/images/x.png" : "/images/check.png"; <Collapsible trigger={<img src={img}/>}
but I don't see how to combine them?
I'd suggest adding the ability to change the trigger text on click. For example, so the text on the trigger can say "Open collapsible" when the div is collapsed and "Close collapsible" when it is open.
I am trying to test the component with react-collapsible using jest and react-test-renderer. But it gives an type error saying "Cannot read property 'addEventListener' of null at componentDidMount (node_modules/react-collapsible/dist/Collapsible.js:105:20). What is the solution for this error?
I am using react with redux.
`-- UNMET PEER DEPENDENCY [email protected]
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN [email protected] requires a peer of react-collapsible@^1.3.0 but none was installed.
npm ERR! code 1
Hello,
we have a very basic problem. We have imported the library and integrated your basic example. By clicking on start the menu opens but it does not close again. There is no way to let it close again. Did you experience this problem?
Thank you
Dennis
Just installed this module, and got the following error in the console.
Warning: Collapsible: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.
The Collapsible__contentOuter
class has height:auto
, but in IE11 its getting a fixed height. This is causing problems for me as the content inside the collapsible component is dynamic and it has overflow: hidden
.
Can be fixed easily with some custom CSS, but the height should behave consistently across all browsers.
Hi there.
Could you do this logic: close other siblings if one collapse will open.
I'm facing this problem with many collapsible item in small popup. So, there is scrollable content, But if you open last one which is visible in modal, UI problem happens.
Please put react
in peerDependencies
for best practices. Consuming apps are getting react dups (see https://facebook.github.io/react/warnings/refs-must-have-owner.html).
How can I style the trigger element, I would like to add a border and some styling but I couldn't get the info from the doc ?
Before I start whining about my issue, thanks for this component. I appreciate your contribution.
My issue is that I am wrapping a Grid that has Columns, using the Semantic UI React components.
When I wrap the Grid in Collapsible, the widths of the Grid's Columns are no longer honored. Something about Collapsible is overriding the css the Grid needs.
I would appreciate any suggestions on what to I can try. I may have to extract from your example and make my own if I can't figure this out.
Thanks again,
John
Hi
Can you please tell me,
how to do - on clicking of accordion, close previous accordion automatically.
I think I tracked it down to
onTransitionEnd=(this.handleTransitionEnd}
Never being fired. It was the parent Accordion I modified for my use, not your code!
Everything else seems to work apart from this trigger, and as such the two calls to setState are never being called.
Any ideas why this might be happening?
Cheers.
Mayhaps the npm package needs to be updated?
Hi,
Awesome component! appreciated!
I'm trying to add action element in trigger area like dropdown/radio buttons
each radio button have a label with "for" attribute - clicking on the label doesn't triggering the radio input change event.
Sample html inside trigger area:
<div class="radio-group">
<div>
<input type="radio" id="radio-input-xx" name="xxx" value="Standard_Application">
<label class="radio-button-label standard-configuration" for="radio-input-xx">Standard</label>
</div>
<div>
<input type="radio" id="radio-input-xx" name="xxx" value="Custom_Deployment">
<label class="radio-button-label custom-configuration" for="radio-input-xx">Custom</label>
</div>
</div>
Hi,
I gave the Collapsible as trigger a component which consists of a
Is there any way to give down the triggerSibling prop to the "row"-class so that it doesn't get triggered when clicking on it?
Best,
Hello! Can you give me an example of how to pass a simple react element into the trigger property? I'm not able to make it work
Thanks!
How can we add up/down chevron image on collapsible header.
🐞 To reproduce this error just set the transitionTime
to zero and try clicking on an open <Collapsible>
to try to close it.
I'm finding increasingly difficult to keep up with maintaining react-collapsible so I'm looking for maintainers/collaborators so if you're up for some Open Source goodness then let me know in this issue. 👍
If I do a npm install react-collapsible
I don't seem to get the latest version of Collapsible.js that I see in the development
branch. For instance the onOpen does not exists in master The work around was to copy paste the latest Collapsible.js (development) in my project install the create-react-class dependency. Using the latest works with onOpen prop.
In the API I can't find a functionality (maybe a Boolean property) to force collapse siblings of Collapsibles. I would like to have only one collapsible open at a time.
P.S. thanks for the good work
Is it possible to use the .Collapsible__trigger
and is-closed
/is-open
to make a collapse all function?
-- I tried using it with GetElementsByClassName
and modifying it from is-closed to is open, but this didn't seem to do anything.
Hi, Glenn.
Thanks for this great component. The default trigger wrapper is a span
element. This is great for when the user supplies only text as the trigger, but as the component also permits the use of arbitrary React elements, I guess it won't be uncommon for the user to supply div
s, ending up with div
s inside the span
(invalid HTML).
I propose the creation of a new property named triggerComponent
(or triggerElement
) with 'span' as the default value (for backward compatibility) which can be used to specify other values such as ' div'.
PR: #57
Thank you.
Hello,
I have developed my own components for trigger
and triggerWhenOpen
. However, the panel collapses/opens whenever I click anywhere on the trigger panel.
I would like open/close only on clicks on specific elements of the trigger area - e.g. a link. I tried to implement this through a custom handleTriggerClick
function, but couldn't figure out how to detect the source of the event and how to force the component to open/close.
How can I achieve this?
Steps I followed:
npm i
webpack-dev-server
Here are the errors:
ERROR in ./src/Collapsible.js
Module not found: Error: Can't resolve 'prop-types' in '/home/akshay.naik/Documents/react-collapsible/src'
@ ./src/Collapsible.js 13:17-38
@ ./example/_src/js/index.js
@ multi (webpack)-dev-server/client?http://localhost:9000 ./example/_src/js/index.js
ERROR in ./example/_src/js/index.js
Module not found: Error: Can't resolve 'react' in '/home/akshay.naik/Documents/react-collapsible/example/_src/js'
@ ./example/_src/js/index.js 3:13-29
@ multi (webpack)-dev-server/client?http://localhost:9000 ./example/_src/js/index.js
ERROR in ./src/Collapsible.js
Module not found: Error: Can't resolve 'react' in '/home/akshay.naik/Documents/react-collapsible/src'
@ ./src/Collapsible.js 9:13-29
@ ./example/_src/js/index.js
@ multi (webpack)-dev-server/client?http://localhost:9000 ./example/_src/js/index.js
ERROR in ./example/_src/js/index.js
Module not found: Error: Can't resolve 'react-dom' in '/home/akshay.naik/Documents/react-collapsible/example/_src/js'
@ ./example/_src/js/index.js 7:16-36
@ multi (webpack)-dev-server/client?http://localhost:9000 ./example/_src/js/index.js
Is there a way to set the focus on top of the component when it is unfolded ?
Is it possible to trigger the click of collapsible from a different component?
Accordion Example Please
Can we have more than 1 data trigger so, for example, if I pass
data-trigger={['text 1', 'text 2']}
it renders it as
<span class="Collapsible__trigger is-open">
<span class="Collapsible__trigger--content-1"> text 1 </span>
<span class="Collapsible__trigger--content-2"> text 2 </span>
</span>
Code like this:
const specialClass = somevar ? 'special-style' : null;
return (
<Collapsible
classParentString="dbc-split-nav-item"
className={specialClass}
>
Hello there.
</Collapsible>
);
winds up applying the class "null"
when someVar
is false. This is not idiomatic in React, where null
values are generally ignored. I discovered this by accident when browsing the inspector. No harm done, but very strange :) One workaround is to set the class to an empty string, but that's a bit weird in this context.
Thanks for a helpful package.
Is it possible to have only one collapsible element open at one time?
So for example if one component is open, and a user clicks on another trigger it animates that component open and closes all others?
Using v.1.2.1
<Collapsible
easing="none"
overflowWhenOpen="visible"
>
Results in:
<div class="Collapsible__contentOuter" style="height: 134px; overflow: hidden;">
<div class="Collapsible__contentInner"></div>
</div>
I'm using Sass to style my components.
Is it possible to add classNames to inner elements like .Collapsible__contentOuter
and Collapsible__contentOuter
? I'd like these elements to share some styles with other components on my app, and it doesn't feel to be right to add react-collapsible
selectors .Collapsible__contentOuter
and Collapsible__contentOuter
to other unrelated SCSS files.
For instance, in my project I have different panels, and some are collapsible and some are not. I have a file called _panel.scss
that looks like this:
`.panel {
&:not(:first-child) {
margin-top: 40px;
}
.panel-heading,
.Collapsible__trigger {
display: block;
position: relative;
padding-bottom: 10px;
border-bottom: solid 2px $gray-light;
margin-top: 0;
margin-bottom: 0;
}
.panel-body,
.Collapsible__contentInner {
padding-top: 16px;
}
}`
That works fine, but I think I'd rather remove the Collapsible styles from there and add the panel-heading
classNames to the Collapsible__trigger
element, for example, but in React world as far as I know I have no access to that markup.
Any ideas or recommendations?
Hello, with the being text, how can I insert icons as the trigger?
Thank you.
If you use lazyRender
without css, then panel doesn't unfold until there have been three clicks. I believe this is because the height of the children is unknown until the first render, so the first click renders the children (but doesn't unfold because height is 0), the second click closes, then the third click finally unfolds correctly.
To reproduce this, delete the content of example/_src/sass/components/_Collapsible.scss
, open the example and click on "What happens if there's a shed-load of content?" It should take three clicks to open properly.
If this isn't going to be changed, the documentation should indicate that some css is required for lazyRender
to work.
I created a component that has several collapsibles. Inside each collapsible I have individual forms. Upon the submit of each form I would like to close the collapsible component and render the submitted form value in the label. Is it possible to programmatically close the collapsible based on an action (submit)?
Note: I did notice you have handleTriggerClick
; however, this would only allow me to override what you are already doing for the open/close, which is functionality I do not want to lose.
The state classes (.is-closed, is-open, .is-disabled) are not overridable.
I'm working on a project which uses CSS Modules and I'm trying to style a child element of the trigger element depending on the open / closed state.
I don't think that this is possible with the current implementation without also storing the state in a wrapper component (and using that to set a class on the child element).
If change status by two way which are trigger and open prop, unnecessary openCollapsible
has been called.
after that, trigger does not work because transitionend
will not be fired.
Already send pull request about it by other, it works for me.
Could you merge it?
#65
height=24px
)transitionend
will be occurred and height=auto
openCollapsible
from componentDidUpdate
by changing open
propcontinueOpenCollapsible
and height=24px
transitionend
WILL NOT BE FIRED because already openedcloseCollapsible
and height=24px
window.setTimeout
WILL NOT BE CALLED because already height
isn't auto
import React, { Component } from 'react'
import Collapsible from 'react-collapsible'
export class Sample extends Component {
constructor() {
super()
this.state = { isOpen: false }
}
toggleCollapsible = () => {
this.setState({ isOpen: !this.state.isOpen })
}
render() {
return (
<div>
<Collapsible trigger="Trigger" open={this.state.isOpen}>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</Collapsible>
<input type="button" onClick={this.toggleCollapsible} value="Toggle" />
</div>
)
}
}
export default Sample
Hi !
I think that so far it isn't possible to style trigger and triggerSibling under one div, your component produces two span that can't be related.
For example, I would like to create something like this :
.myTriggerStyle {
display: inline-flex;
justify-content: space-between;
}
My html output :
<div className="myTriggerStyle">
triggerElement //a span element with my trigger stuff
triggerSiblingElement // a span element with my triggerSibling stuff
</div>
But the first div parent that contains trigger and triggerSibling is the div that also contains all of my collapsible data, but I want their style to be different from the triggers styles.
How can I achieve this ?
Thanks for building and sharing this component. It works great for my needs. I've been using it on a local branch with my package.json pointing to a sha with the open/close triggers.
"react-collapsible": "git+ssh://[email protected]:glennflanagan/react-collapsible.git#1b6065a",
I am eagerly awaiting your next release. If there is any way I can help out to expedite that process, please let me know.
Thanks,
Joel
Hi,
I have the situation where the trigger is a react component and contains itself an <a href=.... /> link. Unfortunately the link is not working anymore since it is becoming also part of the trigger. Do you have a solution for that?
Thank you
D063520
Hello, I have a problem,
I have to be able to display menu lists, by default contentOuter is overflow: hidden, I overloaded to tell him that when you open you're overflow: visible, and when you close you're overflow: hidden,
The problem I have is when I decide to reopen the collapse, the text appears as it is in immediatly because it's -> overflow: visible,
There would be a possibility when you want to open it to overflow: auto and when finished it pass in overflow: visible?
Best regards !
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.