react-router-component-transition

Demo and component for React + React Router component + page transitions

Usage no npm install needed!

<script type="module">
  import reactRouterComponentTransition from 'https://cdn.skypack.dev/react-router-component-transition';
</script>

README

React-Router-Component-Transition

A simple component that overrides <Locations> in React-Router-Component to animate page transitions.

View the Demo

Install

npm install react-router-component-transition

var AnimatedLocations = require('react-router-component-transition');

Usage

Simply replace any usage of <Locations> in your app with <AnimatedLocations>.

View the source for more details and comments.

You can also change the transition used on a particular link by using the prop transitionName, or shut off transitions entirely by using the prop noTransition.

View the demo source for more usage details.

Development

To run the demo locally and tinker:

% git clone https://github.com/strml/react-router-page-transition.git
% npm install
% npm run develop
% open index.html