react-router-fader

Wraps react-fader for use with react-router version 2 or 3

Just use it as the component of a parent route, and voila, you automatically get fade transitions between its child routes!

Usage

npm install --save react-fader react-router-fader

import Fader from 'react-router-fader' // or react-router-fader/lib/withTransitionContext
 
// example route components
import Home from './Home'
import Users from './Users'
import UserGroups from './UserGroups'
import Policies from './Policies'
 
// use Fader as the component of your parent routes, like so:
 
export const rootRoute = {
  component: Fader,
  childRoutes: [
    {
      path: '/admin',
      component: Fader,
      childRoutes: [
        {path: '/users', component: Users},
        {path: '/userGroups', component: UserGroups},
        {path: '/policies', component: Policies},
      ],
    },
    {path: '/', component: Home},
  ],
}

withTransitionContext

npm install --save react-fader react-router-fader react-transition-context

import Fader from 'react-router-fader/lib/withTransitionContext'

This works exactly like Fader except that it renders its children within a TransitionContext component from react-transition-context with the given transitionState. This is useful for doing things like focusing an <input> element after the children have transitioned in.

API

makeReactRouterFader(Fader: ReactClass<FaderProps>, extraProps?: $Shape<FaderProps>): ReactClass<RouteProps>

import makeReactRouterFader from 'react-router-fader/lib/makeReactRouterFader'

This is a HOC that is used by import 'react-router-fader' and importreact-router-fader/lib/withTransitionContext. Those modules use{animateHeight: false}forextraProps. You can use this function to pass different props to the wrappedFader` component.