transition in react router demo

transition.jsx

import React from 'react'

export default class Transition extends React.Component{
  static contextTypes = {
    router: React.PropTypes.object
  };

  constructor(props){
    super()
    let opacity = 1

    if(props.in !== false){
      if(props.location.action == 'PUSH') opacity = 0.2
      else if(process.CLIENT && props.location.action == 'POP') opacity = 0.2
    }

    this.state = {
      opacity
    }
  }

  componentDidMount() {
    if(this.state.opacity == 0.2) this.fadeIn()
    if(this.props.out !== false) this.context.router.setRouteLeaveHook(this.props.route, this.routerWillLeave.bind(this))
  }

  routerWillLeave() {
    this.setState({opacity: 0.2})
  }

  fadeIn() {
    setTimeout(() => this.setState({opacity: 1}),50)
  }

  render(){
    let style = {
      transition: 'all 500ms ease-in-out',
      ...this.state
    }

    return (
      <div style={style}>
        {this.props.children}
      </div>
    )
  }
}

You can set in={false} to not fade in to a route or out={false). The process.CLIENT check makes sure if you're on the client side and the action is a pop, set the opacity to fade out. Without this on page load it would fade I think. Wrote this a few weeks ago

Don't need those hooks:

componentWillReceiveProps(nextProps) {
  if (nextProps.location !== this.props.location) {
    // new transition
    this.setState(...)
  }
}

Thanks, makes sense!