Example: Add with-react-transition-group

examples/with-react-transition-group/README.md

@@ -0,0 +1,43 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-react-transition-group)
+# react-transition-group Example
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-react-transition-group with-react-transition-group-app
+# or
+yarn create next-app --example with-react-transition-group with-react-transition-group-app
+```
+
+### Download manually
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-react-transition-group
+cd with-react-transition-group
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
+
+```bash
+now
+```
+
+## The idea behind the example
+
+Uses a custom _app.js to enable true page transition with react-transition-group

examples/with-react-transition-group/components/App.js

@@ -0,0 +1,42 @@
+export default ({ children }) => (
+  <main>
+    {children}
+    <style jsx global>{`
+      * {
+        font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
+          'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New',
+          monospace, serif;
+      }
+      body {
+        margin: 0;
+        padding: 25px 50px;
+      }
+      a {
+        color: #22bad9;
+      }
+      p {
+        font-size: 14px;
+        line-height: 24px;
+      }
+      article {
+        margin: 0 auto;
+        max-width: 650px;
+      }
+      button {
+        align-items: center;
+        background-color: #22bad9;
+        border: 0;
+        color: white;
+        display: flex;
+        padding: 5px 7px;
+      }
+      button:active {
+        background-color: #1b9db7;
+        transition: background-color 0.3s;
+      }
+      button:focus {
+        outline: none;
+      }
+    `}</style>
+  </main>
+)

examples/with-react-transition-group/components/Header.js

@@ -0,0 +1,28 @@
+import Link from 'next/link'
+import { withRouter } from 'next/router'
+
+const Header = ({ router: { pathname } }) => (
+  <header>
+    <Link prefetch href='/'>
+      <a className={pathname === '/' ? 'is-active' : ''}>Red</a>
+    </Link>
+    <Link prefetch href='/blue'>
+      <a className={pathname === '/blue' ? 'is-active' : ''}>Blue</a>
+    </Link>
+    <style jsx>{`
+      header {
+        margin-bottom: 25px;
+      }
+      a {
+        font-size: 14px;
+        margin-right: 15px;
+        text-decoration: none;
+      }
+      .is-active {
+        text-decoration: underline;
+      }
+    `}</style>
+  </header>
+)
+
+export default withRouter(Header)

examples/with-react-transition-group/components/Layout.js

@@ -0,0 +1,9 @@
+import App from './App'
+import Header from './Header'
+
+export default ({ children }) => (
+  <App>
+    <Header />
+    {children}
+  </App>
+)

examples/with-react-transition-group/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "with-react-transition-group",
+  "version": "2.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "16.2.0",
+    "react-dom": "16.2.0",
+    "react-transition-group": "^2.3.1"
+  },
+  "author": "",
+  "license": "MIT"
+}

examples/with-react-transition-group/pages/_app.js

@@ -0,0 +1,40 @@
+import App, { Container } from 'next/app'
+import React from 'react'
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
+import Layout from '../components/Layout'
+
+export default class MyApp extends App {
+  render () {
+    const { Component, pageProps } = this.props
+    return (
+      <Container>
+        <Layout>
+          <TransitionGroup>
+            <CSSTransition
+              key={this.props.router.route}
+              classNames='fade'
+              timeout={1000}
+            >
+              <Component {...pageProps} />
+            </CSSTransition>
+          </TransitionGroup>
+        </Layout>
+        <style jsx global>{`
+          .fade-enter {
+            opacity: 0;
+          }
+
+          .fade-enter-active {
+            opacity: 1;
+            transition: opacity 1.5s;
+          }
+
+          .fade-exit-active {
+            opacity: 0;
+            transition: opacity 1.5s;
+          }
+        `}</style>
+      </Container>
+    )
+  }
+}

examples/with-react-transition-group/pages/blue.js

@@ -0,0 +1,14 @@
+export default () => (
+  <div>
+    <p>
+      Blue
+    </p>
+    <style jsx>{`
+      p {
+        padding: 10px 10px 10px 10px;
+        color: black;
+        background-color: #7777FF;
+      }
+    `}</style>
+  </div>
+)

examples/with-react-transition-group/pages/index.js

@@ -0,0 +1,14 @@
+export default () => (
+  <div>
+    <p>
+      Red
+    </p>
+    <style jsx>{`
+      p {
+        padding: 10px 10px 10px 10px;
+        color: white;
+        background-color: red;
+      }
+    `}</style>
+  </div>
+)