Add react-jss example (#5140)

Added a clear example on how to use react-jss with injecting the styles on the server. cssinjs/jss#457
2024-01-19 02:48:18 +00:00 · 2018-09-12 15:49:54 +02:00 · 2018-09-12 15:49:54 +02:00 · b79bbecb13
parent c2a7766a05
commit b79bbecb13
6 changed files with 141 additions and 0 deletions
--- a/examples/with-react-jss/.babelrc
+++ b/examples/with-react-jss/.babelrc
@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}
--- a/examples/with-react-jss/README.md
+++ b/examples/with-react-jss/README.md
@ -0,0 +1,46 @@
+[![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-redux)
+
+# react-jss 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-jss with-react-jss-app
+# or
+yarn create next-app --example with-react-jss with-react-jss-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-react-jss
+cd with-react-jss
+```
+
+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
+
+This example shows how to integrate react-jss and jss in Next.js
+
+The critical styles will be injected into the head when server rendered.
--- a/examples/with-react-jss/package.json
+++ b/examples/with-react-jss/package.json
@ -0,0 +1,16 @@
+{
+  "name": "with-react-jss",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-jss": "8.6.1"
+  },
+  "license": "ISC"
+}
--- a/examples/with-react-jss/pages/_app.js
+++ b/examples/with-react-jss/pages/_app.js
@ -0,0 +1,11 @@
+import App from 'next/app'
+
+export default class MyApp extends App {
+  componentDidMount () {
+    const style = document.getElementById('server-side-styles')
+
+    if (style) {
+      style.parentNode.removeChild(style)
+    }
+  }
+}
--- a/examples/with-react-jss/pages/_document.js
+++ b/examples/with-react-jss/pages/_document.js
@ -0,0 +1,39 @@
+import React from 'react'
+import Document, { Head, Main, NextScript } from 'next/document'
+import {
+  SheetsRegistry,
+  JssProvider
+} from 'react-jss'
+
+export default class JssDocument extends Document {
+  static getInitialProps (ctx) {
+    const registry = new SheetsRegistry()
+    const page = ctx.renderPage(App => props => (
+      <JssProvider registry={registry}>
+        <App {...props} />
+      </JssProvider>
+    ))
+
+    return {
+      ...page,
+      registry
+    }
+  }
+
+  render () {
+    return (
+      <html>
+        <Head>
+          <style id='server-side-styles'>
+            {this.props.registry.toString()}
+          </style>
+        </Head>
+
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
--- a/examples/with-react-jss/pages/index.js
+++ b/examples/with-react-jss/pages/index.js
@ -0,0 +1,26 @@
+import React from 'react'
+import injectSheet from 'react-jss'
+
+const styles = {
+  container: {
+    marginTop: 100,
+    textAlign: 'center'
+  },
+
+  header: {
+    fontSize: 24,
+    lineHeight: 1.25
+  }
+}
+
+function Index (props) {
+  return (
+    <div className={props.classes.container}>
+      <h1 className={props.classes.header}>
+        Example on how to use react-jss with Next.js
+      </h1>
+    </div>
+  )
+}
+
+export default injectSheet(styles)(Index)