Add an option to avoid initial render of content

[brillout]

Currently the following will log I am being rendered.

const MyComponent = React.createClass({render: () =>
  console.log('I am being rendered') || <span>content</span>
});

<Collapse isOpened={false}>
  <MyComponent />
</Collapse>

In case of many initially collapsed elements, it can be a considerable performance penalty to render all collapsed content.

An option could determine if these should be initially rendered.
Although I'm not sure why someone would want to initially render a hidden element.

Alternatively, a solution would be to implement #19 as an option. The following construct would then achieve the wished behavior.

let isOpened = false;
<div>
  { isOpened && <Collapsed isOpened={isOpened} initallyAnimate={true}>content</Collapse>}
</div>

Thanks for <Collapase/> btw :-)

[brillout]

Alternatively, a solution would be to implement #19 as an option

In the following a solution using the version before #19 was applied, namely version 1.4.0

import React from 'react';
import ReactCollapse from 'react-collapse';

const Collapse = React.createClass({
    getInitialState: () => ({never_rendered: true}),
    componentWillReceiveProps: function(nextProps) {
        if( nextProps.isOpened ) {
            this.setState({never_rendered: false});
        }
    },
    render: function(){
        if( this.state.never_rendered ) {
            return null;
        }
        return (
            <ReactCollapse isOpened={this.props.isOpened}>
                {this.props.children}
            </ReactCollapse>
        );
    },
});

[nkbt]

Hi!

<Collapse isOpened={false}>
  { console.log('I am being rendered') || <span>content</span> }
</Collapse>

In this case "children" are being rendered in your parent component. It is not a concern of Collapse in this case.

<Collapse isOpened={this.state.isOpened}>
  { this.state.isOpened ? console.log('I am being rendered') || <span>content</span> : null }
</Collapse>

^ that would be a solution

[nkbt]

I mean that when props.children are passed to collapse - they are already rendered =)

[brillout]

In this case "children" are being rendered in your parent component

Ah thanks true, I didn't think about it. Sorry. I accordingly changed the original post and its example.

that would be a solution

I just tried out and it works. Thanks.

Actually, I thought about your solution before but I dismissed it because in my head the dynamic height feature was stamped as not reliable. But I think I now know why it isn't always "reliable".
If the children of <Collapse/> re-render and their height change because of an "internal" state change then <Collapse/> will not know about this state change and will not adapt to the new height.
Correct me if I'm wrong.
Maybe a note in the readme about this could be useful.

I now use the following Component to transparently use the wished feature.

import React from 'react';
import ReactCollapse from 'react-collapse';

const Collapse = React.createClass({
    getInitialState: function() {
        return {
            never_rendered: !this.props.isOpened,
        };
    },
    componentWillReceiveProps: function(nextProps) {
        if( nextProps.isOpened ) {
            this.setState({never_rendered: false});
        }
    },
    render: function(){
        return (
            <ReactCollapse isOpened={this.props.isOpened}>
                {!this.state.never_rendered && this.props.children}
            </ReactCollapse>
        );
    },
});

It could be nice to have <Collapse/> behave like that by default. Or with an opt-out / opt-in option.

[nkbt]

Yep exactly, you are correct.

I can't see why adding this into collapse itself, since you already have component wrapper that perfectly works in your case. I try to keep collapse a very lean component so all extras can be added by wrapping. The reason is that it adding more features makes readme way heavier and component itself. Which reduces its wrappability at the end.

[brillout]

Ok.
FYI, when I first used <Collapse/> I was expecting it to not render hidden content. I was surprised that it did.

[nkbt]

Yeah, I don't think we can do much about this particular case since it
looks like just the way React works itself. I may be wrong, and If you
could clone Codepen (it has the mist recent collapse there) and reproduce
the issue - would be very helpful
On Tue, 9 Aug 2016 at 18:48, brillout notifications@github.com wrote:

Ok.
FYI, when I first used I was expecting it to not render
hidden content. I was surprised that it did.

—
You are receiving this because you were assigned.

Reply to this email directly, view it on GitHub
#63 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAKsoOHTn-sI6E2HRKwKCdD8K92VquDCks5qeD7WgaJpZM4Ja4s2
.

[nkbt]

Hey, @brillout! You were right, there was an actual bug in react-collapse, which is captured here #66

It is now fixed by big rewrite #72 and published as react-collapse@next (not the main channel yet), there are some breaking changes, so if you wish to try it - check the new documentation at master branch: https://github.com/nkbt/react-collapse/tree/master

I will later supply migration docs, though there are not so many big changes to public API and most of things should work as usual

[davidspiess]

react-collapse@next fixed this issue for me. Thanks!