React Animated Views

A higher order component to make mobile animated page views easier with react-router

npm install react-animated-views --save

(for now, until I publish it... has to be npm install https://github.com/devgeeks/react-animated-views --save)

It has a very small API overall. It comes down to setting up your routes, wrapping your components in the higher-order component, and using the push() and pop() methods passed in to this.props instead of the usual react-router versions.

Built in animations available (custom animations coming soon):

• slideLeft
• slideUp
• popFade

this.props.push(pathname, animation):

e.g.: push('/two', 'slideLeft');

this.props.pop(<optional animation>):

e.g.: pop() or pop('popFade');

Sometimes when switching animations, the pop() will also need the animation passed in.

this.props.style:

e.g.: <div style={ style }>

Styles passed in to do the actual animations

Basic example

See full example in the examples folder.

import React from 'react';
import ReactDOM from 'react-dom';
import { hashHistory, Redirect, Router, Route } from 'react-router';
import TransitionGroup from 'react-addons-transition-group';

// bring in the higher order component from react-animated-views
import animateView from 'react-animated-views';

// Top level App component for transitioning the page components 
const App = React.createClass({
  displayName: 'App',

  render() {
    const {                                          
      location: { pathname: key, action: direction },
    } = this.props;                                  

    const props = {                      
      key,                               
      direction: direction.toLowerCase(),
    };                                   

    return (
      <TransitionGroup>
        { React.cloneElement(this.props.children || <div />, props) }
      </TransitionGroup>
    );
  },
});


// Page One component
const PageOne = React.createClass({
  displayName: 'PageOne',

  propTypes: {
    push: React.PropTypes.func,
    style: React.PropTypes.object,
  },

  goToPageTwo() {
    const { push } = this.props;
    push('/two', 'slideLeft');
  },

  render() {
    const { style } = this.props;

    return (
      <div className="pageone" style={ style }>
        <p>Page One</p>
        <a
          className="button-next-page"
          onClick={ this.goToPageTwo }
        >
          Slide Left to page two &raquo;
        </a>
      </div>
    );
  },
});

// Now, wrap PageOne in the animateView higher order component
const AnimatedPageOne = animateView(PageOne);


// Page Two component
const PageTwo = React.createClass({
  displayName: 'PageTwo',

  propTypes: {
    push: React.PropTypes.func,
    style: React.PropTypes.object,
  },

  goBack() {
    const { pop } = this.props;
    pop('slideLeft');
  },

  render() {
    const { style } = this.props;

    return (
      <div className="pagetwo" style={ style }>
        <p>Page Two</p>
        <a
          className="button-back"
          onClick={ this.goBack }
        >
          &laquo; Go back to to page one
        </a>
      </div>
    );
  },
});

// Now, wrap PageTwo in the animateView higher order component
const AnimatedPageTwo = animateView(PageTwo);


// Finally we set up our routes
ReactDOM.render((
  <Router history={ hashHistory }>
    <Route component={ App }>
      <Route path="one" component={ AnimatedPageOne } />
      <Route path="two" component={ AnimatedPageTwo } />
      <Redirect from="/" to="/one" />
    </Route>
  </Router>
), document.getElementById('app'));