mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Add with-emotion example (#2395)
* Add with-emotion example * Fix linting errors
This commit is contained in:
Mitchell Hamilton
Tim Neutkens
parent
5d797702d1
commit
31db8dd932
8
examples/with-emotion/.babelrc
Normal file
8
examples/with-emotion/.babelrc
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"presets": [
|
||||
"next/babel"
|
||||
],
|
||||
"plugins": [
|
||||
["emotion/babel", { "inline": true }]
|
||||
]
|
||||
}
|
||||
34
examples/with-emotion/README.md
Normal file
34
examples/with-emotion/README.md
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
[](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
16
examples/with-emotion/package.json
Normal 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
33
examples/with-emotion/pages/_document.js
Normal 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
83
examples/with-emotion/pages/index.js
Normal 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>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in a new issue