SwitchCSSTransitionGroup

Combination of ReactCSSTransitionGroup and Switch for triggering transitions between routes.

There is no key param because it is changing automatically based on matching routes.

Install

npm i --save switch-css-transition-group

Demo

storybook online

or locally you can try npm run storybook

Usage

import SwitchCSSTransitionGroup from 'switch-css-transition-group'
 
// your code
 
<SwitchCSSTransitionGroup
    location={history.location}
    transitionName='example'
    transitionLeaveTimeout={300}
    transitionEnterTimeout={500}>
  <Route path='/' exact component={Home} />
  <Route path='/about' component={About} />
</SwitchCSSTransitionGroup>

Similar like if you are using ReactCSSTransitionGroup and Switch there are available properties:

• location - your history.location object from react-router
• transition* - params from ReactCSSTransitionGroup

On this ReactCSSTransitionGroup docs page you will also find how to deal with CSS and how customize more the transitions.