# react-router-animation-examples

> Get started with a Universal boilerplate containing tools like React, Redux, Koa...

Latest version **2.0.1** (published 2017-01-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-router-animation-examples
pnpm add react-router-animation-examples
yarn add react-router-animation-examples
bun add react-router-animation-examples
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2017-01-30 |
| First published | 2016-08-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=6.0.0 |
| Dependencies | 37 |
| Known vulnerabilities | 0 (+4 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 77 |
| Author | Kiki le singe |
| Maintainers | kiki-le-singe |
| Keywords | starter, boilerplate, react, react-router, react-helmet, redux, es2015, es2016, es2017, babel, webpack, hot, reload, hmr, hot-loader, koa, postcss, cssnext, sass, css-modules, ssr, isomorphic, universal |

## Links

- npm: https://www.npmjs.com/package/react-router-animation-examples
- Repository: https://github.com/kiki-le-singe/react-router-animation-examples
- Issues: https://github.com/kiki-le-singe/react-router-animation-examples/issues
- npm.io page: https://npm.io/package/react-router-animation-examples

## Dependencies (37)

- [ip](https://npm.io/package/ip.md) ^1.1.4
- [koa](https://npm.io/package/koa.md) ^2.0.0
- [debug](https://npm.io/package/debug.md) ^2.6.0
- [react](https://npm.io/package/react.md) ^15.4.2
- [redux](https://npm.io/package/redux.md) ^3.6.0
- [globby](https://npm.io/package/globby.md) ^6.1.0
- [webpack](https://npm.io/package/webpack.md) ^2.2.0
- [fs-extra](https://npm.io/package/fs-extra.md) ^2.0.0
- [inquirer](https://npm.io/package/inquirer.md) ^3.0.1
- [koa-proxy](https://npm.io/package/koa-proxy.md) ^0.7.0
- [react-dom](https://npm.io/package/react-dom.md) ^15.4.2
- [babel-core](https://npm.io/package/babel-core.md) ^6.22.1
- [koa-helmet](https://npm.io/package/koa-helmet.md) ^2.0.0
- [koa-static](https://npm.io/package/koa-static.md) ^3.0.0
- [koa-convert](https://npm.io/package/koa-convert.md) ^1.2.0
- [react-redux](https://npm.io/package/react-redux.md) ^5.0.2
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^6.7.0
- [koa-compress](https://npm.io/package/koa-compress.md) next
- [react-helmet](https://npm.io/package/react-helmet.md) ^4.0.0
- [react-router](https://npm.io/package/react-router.md) ^3.0.2
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.20.0
- [normalize.css](https://npm.io/package/normalize.css.md) ^5.0.0
- [better-npm-run](https://npm.io/package/better-npm-run.md) 0.0.14
- [koa-static-cache](https://npm.io/package/koa-static-cache.md) ^3.2.0
- [react-hot-loader](https://npm.io/package/react-hot-loader.md) ^3.0.0-beta.6
- [webpack-md5-hash](https://npm.io/package/webpack-md5-hash.md) ^0.0.5
- [koa-html-minifier](https://npm.io/package/koa-html-minifier.md) ^1.0.1
- [react-router-redux](https://npm.io/package/react-router-redux.md) ^4.0.7
- [source-map-support](https://npm.io/package/source-map-support.md) ^0.4.11
- [why-did-you-update](https://npm.io/package/why-did-you-update.md) ^0.0.8
- [serialize-javascript](https://npm.io/package/serialize-javascript.md) ^1.3.0
- [purifycss-webpack-plugin](https://npm.io/package/purifycss-webpack-plugin.md) ^2.0.3
- [webpack-isomorphic-tools](https://npm.io/package/webpack-isomorphic-tools.md) ^2.6.6
- [koa-webpack-dev-middleware](https://npm.io/package/koa-webpack-dev-middleware.md) ^1.3.0
- [koa-webpack-hot-middleware](https://npm.io/package/koa-webpack-hot-middleware.md) ^1.0.3
- [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) ^2.0.0-rc.2
- [react-addons-css-transition-group](https://npm.io/package/react-addons-css-transition-group.md) ^15.4.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2017-01-30
- 2.0.0 — 2017-01-29
- 1.3.0 — 2016-09-17
- 1.2.0 — 2016-09-17
- 1.1.0 — 2016-09-16
- 1.0.2 — 2016-08-09
- 1.0.1 — 2016-08-07

## README

# React Router Animation Examples

## Introduction

This project is just an example using [`React Router`](https://github.com/reactjs/react-router) and [`React's Animations`](https://facebook.github.io/react/docs/animation.html) in a mobile context. So reduce your screen size.

In this example I only use `react-router` but in my opinion we can't only use the router to navigate from one screen to the other. Because obviously the route will change and you'll lose the previous displayed screen. This is not always the wanted effect in a mobile application. Maybe we could combine the router with the pushing and popping techniques like [`React Native`](https://facebook.github.io/react-native/)'s [`Navigation`](https://facebook.github.io/react-native/docs/navigation.html) or native mobile apps.


> Note: This example uses [react-redux-universal-boilerplate](https://github.com/kiki-le-singe/react-redux-universal-boilerplate)


## Requirements

 * [nodejs](http://nodejs.org/)

> Node `>=6.0.0`

## Optional

 * [yarn](https://yarnpkg.com/)

## Installation

```shell
$ git clone https://github.com/kiki-le-singe/react-router-animation-examples.git <name>
$ cd <name>
$ npm install or yarn
```


## Features
* [react](https://github.com/facebook/react)
* [react-router](https://github.com/reactjs/react-router)
* [Animation Add-Ons](https://facebook.github.io/react/docs/animation.html)
* [webpack 2](https://github.com/webpack/webpack)
* code splitting


## Sources

 * [React Animation](https://facebook.github.io/react/docs/animation.html)
 * [React Router](https://github.com/reactjs/react-router)
  * [React Router's examples animations](https://github.com/reactjs/react-router/tree/master/examples/animations)
  * [React Router's examples nested animations](https://github.com/reactjs/react-router/tree/master/examples/nested-animations)

## Learn more

 * [Using CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)

---
_Source: https://npm.io/package/react-router-animation-examples · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
