Novelty Plastic Moustache

    react-router-transition-render-fork

    1.4.1 • Public • Published

    React Router Transition

    Painless transitions for React Router, powered by React Motion. Example site.

    • v4-first
    • backward-compatible with previous versions of react-router

    Installation

    npm install --save react-router-transition react-router-dom

    Example Usage

    import { BrowserRouter as Router, Route } from 'react-router-dom';
    import { AnimatedSwitch } from 'react-router-transition';
     
    export default () => (
      <Router>
        <AnimatedSwitch
          atEnter={{ opacity: 0 }}
          atLeave={{ opacity: 0 }}
          atActive={{ opacity: 1 }}
          className="switch-wrapper"
        >
          <Route exact path="/" component={Home} />
          <Route path="/about/" component={About}/>
          <Route path="/etc/" component={Etc}/>
        </AnimatedSwitch>
      </Router>
    )
    .switch-wrapper {
      position: relative;
    }
     
    .switch-wrapper > div {
      position: absolute;
    }

    Docs

    Limitations

    This library has some obvious limitations, the most marked of which are:

    • no staggering or sequencing of animations
    • no durations or timing functions

    Install

    npm i react-router-transition-render-fork

    DownloadsWeekly Downloads

    3

    Version

    1.4.1

    License

    MIT

    Unpacked Size

    477 kB

    Total Files

    24

    Last publish

    Collaborators

    • michaeldimmitt