diff --git a/examples/with-portals/README.md b/examples/with-portals/README.md new file mode 100644 index 00000000..a998b6f0 --- /dev/null +++ b/examples/with-portals/README.md @@ -0,0 +1,27 @@ +# Example with portals + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-portals +cd with-portals +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +This example show how to use the React [Portals](https://reactjs.org/docs/portals.html) feature with Next.js. diff --git a/examples/with-portals/components/modal.js b/examples/with-portals/components/modal.js new file mode 100644 index 00000000..9019adfc --- /dev/null +++ b/examples/with-portals/components/modal.js @@ -0,0 +1,50 @@ +import { Component } from 'react' +import { createPortal } from 'react-dom' + +export default class extends Component { + componentWillMount () { + // get the mount point, is because of this why the modal + // can't be used server side, we need access to the DOM + this.modalRoot = document.getElementById('modal') + } + + render () { + const { title, children } = this.props + + return createPortal( +
+
+

{title}

+ {children} +
+ + +
, + this.modalRoot + ) + } +} diff --git a/examples/with-portals/package.json b/examples/with-portals/package.json new file mode 100644 index 00000000..4c6c6a4d --- /dev/null +++ b/examples/with-portals/package.json @@ -0,0 +1,12 @@ +{ + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "next": "^4.1.4", + "react": "^16.2.0", + "react-dom": "^16.2.0" + } +} diff --git a/examples/with-portals/pages/_document.js b/examples/with-portals/pages/_document.js new file mode 100644 index 00000000..25829288 --- /dev/null +++ b/examples/with-portals/pages/_document.js @@ -0,0 +1,17 @@ +import Document, { Head, Main, NextScript } from 'next/document' + +export default class extends Document { + render () { + return ( + + + +
+ {/* here we will mount our modal portal */} +