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