react-router-dom-transition
TypeScript icon, indicating that this package has built-in type declarations

0.2.0 • Public • Published

react-router-dom-transition

react-router-dom-transition uses react-router-dom to enable transition.

install

npm i --save react-router-dom-transition

usage

import { BrowserRouter, Route } from 'react-router-dom';
import TransitionSwitch from 'react-router-dom-transition';
 
render() {
  return (
    <BrowserRouter>
      /* replace with Switch of react-router-dom */
      <TransitionSwitch duration={300}>
        <Route component="Top" path="/" />
        <Route exact path="/profile" component={Profile} />
        <Route exact path="/about" component={About} />
      </TransitionSwitch>
    </BrowserRouter>
  );
}
 

example

react-router-dom-transition

props

  • children: Route Components from react-router-dom
  • className?: To be added to parent dom
  • duration: duration time(ms)

classNames

  • transition-switch: parent dom
  • current: wrapper dom of current route component
  • next: wrapper dom of next route component
  • push: wrapper doms of route components at PUSH
  • pop: wrapper doms of route components at POP
  • do: wrapper doms of route components at transition start

style example

.transition-switch {
  > .current {
    top: 0;
 
    &.push.do {
      top: -100%;
    }
 
    &.pop.do {
      top: 100%;
    }
  }
 
  > .next {
    &.push {
      top: 100%;
    }
 
    &.pop {
      top: -100%;
    }
 
    &.push,
    &.pop {
      &.do {
        top: 0;
      }
    }
  }
}

Package Sidebar

Install

npm i react-router-dom-transition

Homepage

kk-web.link/

Weekly Downloads

3

Version

0.2.0

License

MIT

Unpacked Size

10.3 kB

Total Files

7

Last publish

Collaborators

  • piro0919