Example/add react-with-styles example (vercel#2417)

miguelcast · timneutkens · commit 1bddb118bc44 · 2017-06-30T22:32:33.000+02:00
* Example/add react-with-styles example

* fix standars next
diff --git a/examples/with-react-with-styles/README.md b/examples/with-react-with-styles/README.md
@@ -0,0 +1,35 @@
+[![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-with-styles)
+
+# Example app with react-with-styles
+
+## 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-react-with-styles
+cd with-react-with-styles
+```
+
+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 features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. 
+That means we can serve the required styles for the first render within the HTML and then load the rest in the client. 
+In this case we are using [react-with-styles](https://github.com/airbnb/react-with-styles).
+
+For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`.
+
+We are using `pages/_index.js` from this example [with-aphrodite](https://github.com/zeit/next.js/tree/v3-beta/examples/with-aphrodite). 
diff --git a/examples/with-react-with-styles/defaultTheme.js b/examples/with-react-with-styles/defaultTheme.js
@@ -0,0 +1,5 @@
+export default {
+  color: {
+    primary: 'salmon'
+  }
+}
diff --git a/examples/with-react-with-styles/package.json b/examples/with-react-with-styles/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "with-react-with-styles",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "aphrodite": "^1.2.1",
+    "next": "latest",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-with-styles": "^1.4.0",
+    "react-with-styles-interface-aphrodite": "^1.2.0"
+  },
+  "license": "MIT"
+}
diff --git a/examples/with-react-with-styles/pages/_document.js b/examples/with-react-with-styles/pages/_document.js
@@ -0,0 +1,39 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+import { StyleSheetServer } from 'aphrodite'
+
+export default class MyDocument extends Document {
+  static async getInitialProps ({ renderPage }) {
+    const { html, css } = StyleSheetServer.renderStatic(() => renderPage())
+    const ids = css.renderedClassNames
+    return { ...html, css, ids }
+  }
+
+  constructor (props) {
+    super(props)
+    /* Take the renderedClassNames from aphrodite (as generated
+     in getInitialProps) and assign them to __NEXT_DATA__ so that they
+     are accessible to the client for rehydration. */
+    const { __NEXT_DATA__, ids } = props
+    if (ids) {
+      __NEXT_DATA__.ids = this.props.ids
+    }
+  }
+
+  render () {
+    /* Make sure to use data-aphrodite attribute in the style tag here
+     so that aphrodite knows which style tag it's in control of when
+     the client goes to render styles. If you don't you'll get a second
+     <style> tag */
+    return (
+      <html>
+        <Head>
+          <style data-aphrodite dangerouslySetInnerHTML={{ __html: this.props.css.content }} />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/examples/with-react-with-styles/pages/index.js b/examples/with-react-with-styles/pages/index.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { css, withStyles } from '../withStyles'
+
+function Home ({ styles }) {
+  return (
+    <div>
+      <h1 {...css(styles.title)}>My page</h1>
+    </div>
+  )
+}
+
+export default withStyles(({ color }) => ({
+  title: {
+    color: color.primary
+  }
+}))(Home)
diff --git a/examples/with-react-with-styles/withStyles.js b/examples/with-react-with-styles/withStyles.js
@@ -0,0 +1,9 @@
+import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'
+import aphroditeInterface from 'react-with-styles-interface-aphrodite'
+import { css, withStyles, ThemeProvider } from 'react-with-styles'
+import MyDefaultTheme from './defaultTheme'
+
+ThemedStyleSheet.registerDefaultTheme(MyDefaultTheme)
+ThemedStyleSheet.registerInterface(aphroditeInterface)
+
+export { css, withStyles, ThemeProvider, ThemedStyleSheet }
