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

Add with-emotion example (#2395)

Browse source 
* Add with-emotion example

* Fix linting errors
This commit is contained in:
Mitchell Hamilton 2017-06-29 15:44:48 +10:00 committed by Tim Neutkens
parent 5d797702d1
commit 31db8dd932
5 changed files with 174 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
examples/with-emotion/.babelrc Normal file
View file

@ -0,0 +1,8 @@
{
"presets": [
"next/babel"
],
"plugins": [
["emotion/babel", { "inline": true }]
]
}

34
examples/with-emotion/README.md Normal file
View file

@ -0,0 +1,34 @@
[![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-emotion)
# Example app with [emotion](https://github.com/tkh44/emotion)
## 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-emotion
cd with-emotion
```
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 to use [emotion](https://github.com/tkh44/emotion) as the styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx).
We are creating three `div` elements with custom styles being shared across the elements. The styles includes the use of pseedo-selector and CSS animations.
This is based off the with-glamorous example.

16
examples/with-emotion/package.json Normal file
View file

@ -0,0 +1,16 @@
{
"name": "with-emotion",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"emotion": "^4.1.2",
"next": "^2.4.6",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"license": "ISC"
}

33
examples/with-emotion/pages/_document.js Normal file
View file

@ -0,0 +1,33 @@
import Document, { Head, Main, NextScript } from 'next/document'
import { renderStaticOptimized } from 'emotion/server'
export default class MyDocument extends Document {
static getInitialProps ({ renderPage }) {
const page = renderPage()
const styles = renderStaticOptimized(() => page.html)
return { ...page, ...styles }
}
constructor (props) {
super(props)
const { __NEXT_DATA__, ids } = props
if (ids) {
__NEXT_DATA__.ids = this.props.ids
}
}
render () {
return (
<html>
<Head>
<title>With Emotion</title>
<style dangerouslySetInnerHTML={{ __html: this.props.css }} />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}

83
examples/with-emotion/pages/index.js Normal file
View file

@ -0,0 +1,83 @@
import React from 'react'
import { hydrate, keyframes, fragment, injectGlobal } from 'emotion'
import styled from 'emotion/styled'
// Adds server generated styles to emotion cache.
// '__NEXT_DATA__.ids' is set in '_document.js'
if (typeof window !== 'undefined') {
hydrate(window.__NEXT_DATA__.ids)
}
export default () => {
injectGlobal`
html, body {
padding: 3rem 1rem;
margin: 0;
background: papayawhip;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
}
`
const basicStyles = fragment`
background-color: white;
color: cornflowerblue;
border: 1px solid lightgreen;
border-right: none;
border-bottom: none;
box-shadow: 5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow;
transition: all 0.1s linear;
margin: 3rem 0;
padding: 1rem 0.5rem;
`
const hoverStyles = fragment`
color: white;
background-color: lightgray;
border-color: aqua;
box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
`
const bounce = keyframes`
from {
transform: scale(1.01);
}
to {
transform: scale(0.99);
}
`
const Basic = styled.div`@apply ${basicStyles};`
const Combined = styled.div`
@apply ${basicStyles};
&:hover {
@apply ${hoverStyles};
}
& code {
background-color: linen;
}
`
const Animated = styled.div`
@apply ${basicStyles};
&:hover {
@apply ${hoverStyles};
}
& code {
background-color: linen;
}
animation: ${props => props.animation} 0.2s infinite ease-in-out alternate;
`
return (
<div>
<Basic>
Cool Styles
</Basic>
<Combined>
With <code>:hover</code>.
</Combined>
<Animated animation={bounce}>
Let's bounce.
</Animated>
</div>
)
}