terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

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

Browse source 
* Example/add react-with-styles example

* fix standars next
This commit is contained in:
Miguel Cast 2017-06-30 15:32:33 -05:00 committed by Tim Neutkens
parent 4a0278b5c0
commit 1bddb118bc
6 changed files with 122 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
examples/with-react-with-styles/README.md Normal file
View file

@ -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).

5
examples/with-react-with-styles/defaultTheme.js Normal file
View file

@ -0,0 +1,5 @@
export default {
color: {
primary: 'salmon'
}
}

18
examples/with-react-with-styles/package.json Normal file
View file

@ -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"
}

39
examples/with-react-with-styles/pages/_document.js Normal file
View file

@ -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>
)
}
}

16
examples/with-react-with-styles/pages/index.js Normal file
View file

@ -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)

9
examples/with-react-with-styles/withStyles.js Normal file
View file

@ -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 }