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:

Contribute

Clone this repo and run:

$ npm install
$ npm start

Once started, open http://localhost:3000 on your browser to see the demo. PRs and suggestions are welcomed.