react-no-unmount-hide

A react component that hide it's children and not umount them. No more other tag is inserted.

We often do this：

class Bar extends React.Compoent { ... }

class Foo extends React.Component {
  constructor() {
    super();
    this.state = {
      value: true,
    };
  }

  render() {
    return (
      <div>
        {
          this.state.value ? <Bar /> : null
        }
      </div>
    )
  }
}

If we do this, the <Bar /> will be unmount because of this.state.value is false.
When this.state.value is true, the <Bar /> will be mount again. It needs through a series of life cycle. Sometimes, We just want to hide <Bar />, not unmount it. So react-no-unmount-hide can DRY for you!!

Install

npm install --save react-no-unmount-hide

Usage

import ReactNoUnmountHide from 'react-no-unmount-hide';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      value: false,
      haha: 'haha'
    };
  }
  
  render() {
    return (
      <div>
        <ReactNoUnmountHide value={this.state.value}>
          <Sub haha={this.state.haha} />
        </ReactNoUnmountHide>
        <button onClick={() => this.setState({ value: !this.state.value, haha: Math.random() })}>toggle</button>
      </div>
    );
  }
}

class Sub extends React.Component {
  render() {
    return (
      <div>{this.props.haha}</div>
    )
  }
}

ReactDOM.render(
  <Demo />,
  document.getElementById('demo')
);

Tests

todo