react-router-pageslider

React Router PageSlider is implemented with react-router, based on hashHistory. served as mixin of components. Making page slide as route changes.

Installation

npm i react-router-pageslider

Basic Usage

Mixin

// import pageslider module
import ReactRouterPageSlider from 'react-router-pageslider';

// get mixin object
// options is optional
const PageSlider = ReactRouterPageSlider(options ?: Object);

const Page1 = React.createClass({
	mixins: [PageSlider],
	render() {
		return (
			// content of your component
		);
	}
});

Route Config

ReactDom.render((
	<Router history={hashHistory}>
		<Route path="/" component={/*Your Container Component*/}>
			<IndexRoute component={/*Your Default Page*/}/>
			{/* page routes here */}
		</Route>
	</Router>
), container);

TransitionGroup

const YourContainerComponent = React.createClass({
	render() {
		return (
			<ReactTransitionGroup>
				{
					this.props.children && React.cloneElement(this.props.children, {
						key: this.props.location.pathname
					})
				}
			</ReactTransitionGroup>
		)
	}
});

see more in demo code shown above.

Why it born

I found there's no handy plugin based on react-router to make this effect. I tried to use ReactCSSTransitionGroup to achieve this effect but failed. As a result...

Thanks

I was inspired by this article which wrote by @ccoenraets. Thanks for your great idea.