diff --git a/examples/with-react-transition-group/README.md b/examples/with-react-transition-group/README.md new file mode 100644 index 0000000000000..2240385b8669b --- /dev/null +++ b/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 diff --git a/examples/with-react-transition-group/components/App.js b/examples/with-react-transition-group/components/App.js new file mode 100644 index 0000000000000..ec15c11f569e8 --- /dev/null +++ b/examples/with-react-transition-group/components/App.js @@ -0,0 +1,42 @@ +export default ({ children }) => ( +
+ {children} + +
+) diff --git a/examples/with-react-transition-group/components/Header.js b/examples/with-react-transition-group/components/Header.js new file mode 100644 index 0000000000000..c1ce52cbaf4ca --- /dev/null +++ b/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 } }) => ( +
+ + Red + + + Blue + + +
+) + +export default withRouter(Header) diff --git a/examples/with-react-transition-group/components/Layout.js b/examples/with-react-transition-group/components/Layout.js new file mode 100644 index 0000000000000..b604924b643ca --- /dev/null +++ b/examples/with-react-transition-group/components/Layout.js @@ -0,0 +1,9 @@ +import App from './App' +import Header from './Header' + +export default ({ children }) => ( + +
+ {children} + +) diff --git a/examples/with-react-transition-group/package.json b/examples/with-react-transition-group/package.json new file mode 100644 index 0000000000000..803418f840389 --- /dev/null +++ b/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" +} diff --git a/examples/with-react-transition-group/pages/_app.js b/examples/with-react-transition-group/pages/_app.js new file mode 100644 index 0000000000000..e694bb2d8aaff --- /dev/null +++ b/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 ( + + + + + + + + + + + ) + } +} diff --git a/examples/with-react-transition-group/pages/blue.js b/examples/with-react-transition-group/pages/blue.js new file mode 100644 index 0000000000000..f96e110894924 --- /dev/null +++ b/examples/with-react-transition-group/pages/blue.js @@ -0,0 +1,14 @@ +export default () => ( +
+

+ Blue +

+ +
+) diff --git a/examples/with-react-transition-group/pages/index.js b/examples/with-react-transition-group/pages/index.js new file mode 100644 index 0000000000000..f163726b76775 --- /dev/null +++ b/examples/with-react-transition-group/pages/index.js @@ -0,0 +1,14 @@ +export default () => ( +
+

+ Red +

+ +
+)