React-vanishingcabinet NPM

react-vanishingcabinet

A VanishingCabinet component will allow you to manage how other components on your UI vanishes from the page. You can wrap your component and control how and when it will vanish and even completely remove it from the UI.

How to use?

Wrap your component with a VanishingCabinet construct.

class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.state = { dismissed: false }
  }

  closeMyComponent = ev => {
    ev.preventDefault()
    this.setState({dismissed: true})
  }

  render() {
    return (
      <VanishingCabinet
        className='VanishingCabinet'
        dismissed={this.state.dismissed}
        componentDismissClass='zoom-out'
      >
        <div className='MyComponent'>
          <h1>My Component</h1>
          <p>Some content inside my component</p>
          <a href='#' onClick={this.closeMyComponent}>Close</a>
        </div>
      </VanishingCabinet>
    )
  }
}

render(<MyComponent/>, document.querySelector('#demo'))

We also need some CSS, VanishingCabinet doesn't include the necessary styling to perform animations on the UI. You could use the following snipet and personalize as needed.

.VanishingCabinet {
    transition: height 0.5s linear, margin 0.5s linear;
}

.zoom-out {
    transform: scale(0);
    opacity: 0;
    transition: opacity 0.25s linear, transform 0.5s linear;
}

.MyComponent {
    /* MyComponent Styles */
}

On the above example both .VanishingCabinet and .zoom-out classes are necessary to perform the desired vanishing effect.

We will achieve this effect:

VanishingCabinet demo