react-transition-dialog

Tiny React component for dialog transitions with click-outside functionality. Uses React CSSTransition (react-transition-group).

Installation

Install with npm or yarn:

$ npm install react-transition-dialog
$ yarn add react-transition-dialog

Usage

Component:

<TransitionDialog
  // required props
  dialogIsOpen={true}
  toggleDialog={this.method}
  timeout={200}
  classNames="message"
  // optional props
  onEntered={this.method}
  onExited={this.method}
>
  // dialog element
</TransitionDialog>

CSS:

.message-enter {
  ...;
}
.message-enter-active {
  ...;
}
.message-exit {
  ...;
}
.message-exit-active {
  ...;
}

Example

import React, { Component } from 'react';
import TransitionDialog from 'react-transition-dialog';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isClicked: false
    };

    this.toggleDialog = this.toggleDialog.bind(this);
  }

  toggleDialog() {
    this.setState({
      isClicked: !this.state.isClicked
    });
  }

  render() {
    const { isClicked } = this.state;
    const dialog = <div className="dialog" />;

    return (
      <div className="app">
        <button onClick={this.toggleDialog}>click</button>
        <TransitionDialog
          dialogIsOpen={isClicked}
          toggleDialog={this.toggleDialog}
          timeout={200}
          classNames="message"
        >
          {dialog}
        </TransitionDialog>
      </div>
    );
  }
}

export default App;

.message-enter {
  opacity: 0.01;
}

.message-enter-active {
  opacity: 1;
  transition: all 200ms ease-out;
}

.message-exit {
  opacity: 1;
}

.message-exit-active {
  opacity: 0.01;
  transition: all 200ms ease-out;
}