From 226387694be17d198c61270bab7c5cb684420b94 Mon Sep 17 00:00:00 2001 From: Hugo Morosini Date: Tue, 31 Mar 2020 21:10:55 +0200 Subject: [PATCH] added "with-route-as-modal" example (#11473) * added "with-route-as-modal" exemple extra space missing in style.css oops linted * Use Link and removed unrequired imports Co-authored-by: Luis Alvarez --- examples/with-route-as-modal/README.md | 44 +++++++++++++++++++ .../with-route-as-modal/components/Post.js | 5 +++ .../components/PostCard.js | 11 +++++ examples/with-route-as-modal/package.json | 16 +++++++ examples/with-route-as-modal/pages/_app.js | 7 +++ examples/with-route-as-modal/pages/index.js | 31 +++++++++++++ .../pages/post/[postId].js | 11 +++++ examples/with-route-as-modal/style.css | 37 ++++++++++++++++ 8 files changed, 162 insertions(+) create mode 100644 examples/with-route-as-modal/README.md create mode 100644 examples/with-route-as-modal/components/Post.js create mode 100644 examples/with-route-as-modal/components/PostCard.js create mode 100644 examples/with-route-as-modal/package.json create mode 100644 examples/with-route-as-modal/pages/_app.js create mode 100644 examples/with-route-as-modal/pages/index.js create mode 100644 examples/with-route-as-modal/pages/post/[postId].js create mode 100644 examples/with-route-as-modal/style.css diff --git a/examples/with-route-as-modal/README.md b/examples/with-route-as-modal/README.md new file mode 100644 index 0000000000..21b240f84c --- /dev/null +++ b/examples/with-route-as-modal/README.md @@ -0,0 +1,44 @@ +# with-route-as-modal + +On many popular social media, opening a post will update the URL but won't trigger a navigation and will instead display the content inside a modal. This behavior ensure the user won't lose the current UI context (scroll position). The URL still reflect the post's actual page location and any refresh will bring the user there. This behavior ensure great UX without neglecting SEO. + +This example show how to conditionally display a modal based on a route. + +## Deploy your own + +Deploy the example using [ZEIT Now](https://zeit.co/now): + +[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-route-as-modal) + +## How to use + +### Using `create-next-app` + +Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: + +```bash +npx create-next-app --example with-route-as-modal with-route-as-modal-app +# or +yarn create next-app --example with-route-as-modal with-route-as-modal-app +``` + +### Download manually + +Download the example: + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-route-as-modal +cd with-route-as-modal +``` + +Install it and run: + +```bash +npm install +npm run dev +# or +yarn +yarn dev +``` + +Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-route-as-modal/components/Post.js b/examples/with-route-as-modal/components/Post.js new file mode 100644 index 0000000000..c98c03425a --- /dev/null +++ b/examples/with-route-as-modal/components/Post.js @@ -0,0 +1,5 @@ +const Post = ({ id }) => { + return
{`I am the post ${id}`}
+} + +export default Post diff --git a/examples/with-route-as-modal/components/PostCard.js b/examples/with-route-as-modal/components/PostCard.js new file mode 100644 index 0000000000..dd8700fcc6 --- /dev/null +++ b/examples/with-route-as-modal/components/PostCard.js @@ -0,0 +1,11 @@ +import Link from 'next/link' + +const PostCard = ({ id }) => { + return ( + + {id} + + ) +} + +export default PostCard diff --git a/examples/with-route-as-modal/package.json b/examples/with-route-as-modal/package.json new file mode 100644 index 0000000000..334038fe2f --- /dev/null +++ b/examples/with-route-as-modal/package.json @@ -0,0 +1,16 @@ +{ + "name": "with-route-as-modal", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "next": "latest", + "react": "16.13.1", + "react-dom": "16.13.1", + "react-modal": "3.11.2" + }, + "license": "ISC" +} diff --git a/examples/with-route-as-modal/pages/_app.js b/examples/with-route-as-modal/pages/_app.js new file mode 100644 index 0000000000..e94667d6f6 --- /dev/null +++ b/examples/with-route-as-modal/pages/_app.js @@ -0,0 +1,7 @@ +import '../style.css' + +function MyApp({ Component, pageProps }) { + return +} + +export default MyApp diff --git a/examples/with-route-as-modal/pages/index.js b/examples/with-route-as-modal/pages/index.js new file mode 100644 index 0000000000..049989abb6 --- /dev/null +++ b/examples/with-route-as-modal/pages/index.js @@ -0,0 +1,31 @@ +import { useRouter } from 'next/router' +import Modal from 'react-modal' +import Post from '../components/Post' +import PostCard from '../components/PostCard' + +Modal.setAppElement('#__next') + +const posts = [1, 2, 3, 4, 5, 6, 7, 8, 9] + +const Index = () => { + const router = useRouter() + + return ( + <> + router.push('/')} + contentLabel="Post modal" + > + + +
+ {posts.map((id, index) => ( + + ))} +
+ + ) +} + +export default Index diff --git a/examples/with-route-as-modal/pages/post/[postId].js b/examples/with-route-as-modal/pages/post/[postId].js new file mode 100644 index 0000000000..696f4ea71f --- /dev/null +++ b/examples/with-route-as-modal/pages/post/[postId].js @@ -0,0 +1,11 @@ +import { useRouter } from 'next/router' +import Post from '../../components/Post' + +const PostPage = () => { + const router = useRouter() + const { postId } = router.query + + return +} + +export default PostPage diff --git a/examples/with-route-as-modal/style.css b/examples/with-route-as-modal/style.css new file mode 100644 index 0000000000..57f92d1d4f --- /dev/null +++ b/examples/with-route-as-modal/style.css @@ -0,0 +1,37 @@ +body { + margin: 0; +} + +#__next { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.postCardGrid { + display: inline-grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} + +.postCard { + width: 150px; + height: 150px; + background-color: lightblue; + display: flex; + justify-content: center; + align-items: center; + border: black solid 1px; +} + +.post { + width: 100%; + height: 100%; + background-color: darkcyan; + font-size: 18px; + display: flex; + align-items: center; + justify-content: center; +} -- GitLab