react-router-nest

Animated screen transitions for React Router.

Demo

Install

npm install --save react-router-nest

Usage

import React, { Component } from "react";
import Nest, { NestLink } from "react-nest";

class App extends Component {
  render () {
    return (
      <Nest>
        <NestLink props={ this.props } to="/AnotherScreen">Go to Another Screen</NestLink>
      </Nest>
    )
  }
}

Screen-in and screen-out animations run on Nest. On clicking, NestLink redirects to the specified path.

Properties

Nest

Prop	Description	Default	Required
animation	Name of the animation. Valid values: fade , slide , zoom	fade
duration	How long the animation will run. Valid values: slow , normal , fast	normal
className	Custom styles for the container.

NestLink

Prop	Description	Default	Required
props	Props of the component. Must be: props={ this.props }		YES
to	The path to link to.		YES
animation	Name of the animation. Valid values: fade , slide , zoom	Inherits from Nest
duration	How long the animation will run. Valid values: slow , normal , fast	Inherits from Nest
className	Custom styles for the container.

License

MIT © Ozan Bolel 2019