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
// example route components // use Fader as the component of your parent routes, like so: 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
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>
This is a HOC that is used by import 'react-router-fader'
and import
react-router-fader/lib/withTransitionContext. Those modules use
{animateHeight: false}for
extraProps. You can use this function to pass different props to the wrapped
Fader` component.