Added with-styled-components-rtl example (#10074)

* Added with-styled-components-rtl example * Add idea behing the example Co-authored-by: Joe Haddad <timer150@gmail.com>
vercel · Jan 14, 2020 · c30e542 · c30e542
1 parent 415a9b6
commit c30e542
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 0 deletions.
diff --git a/examples/with-styled-components-rtl/.babelrc b/examples/with-styled-components-rtl/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}
diff --git a/examples/with-styled-components-rtl/README.md b/examples/with-styled-components-rtl/README.md
@@ -0,0 +1,56 @@
+# Example with styled-components RTL
+
+This example shows how to use nextjs with right to left (RTL) styles using styled-components.
+
+## Deploy your own
+
+Deploy the example using [ZEIT Now](https://zeit.co/now):
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-styled-components-rtl)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/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-styled-components-rtl with-styled-components-rtl-app
+# or
+yarn create next-app --example with-styled-components-rtl with-styled-components-rtl-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-styled-components-rtl
+cd with-styled-components-rtl
+```
+
+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
+
+Right to left allows to "flip" every element in your site to fit the needs of the cultures that are read from right to left (like arabic for example).
+
+This example shows how to enable right to left styles using `styled-components`.
+
+The good news, is there is no need of doing it manually anymore. `stylis-plugin-rtl` makes the transformation automatic.
+
+From `pages/index.js` you can see, styles are `text-align: left;`, but what is actually applied is `text-align: right;`.
diff --git a/examples/with-styled-components-rtl/package.json b/examples/with-styled-components-rtl/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "with-styled-components",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
+    "styled-components": "5.0.0",
+    "stylis-plugin-rtl": "1.0.0"
+  },
+  "devDependencies": {
+    "babel-plugin-styled-components": "1.10.6"
+  },
+  "license": "ISC"
+}
diff --git a/examples/with-styled-components-rtl/pages/_app.js b/examples/with-styled-components-rtl/pages/_app.js
@@ -0,0 +1,21 @@
+import App from 'next/app'
+import React from 'react'
+import { ThemeProvider } from 'styled-components'
+
+const theme = {
+  colors: {
+    primary: '#0070f3',
+  },
+}
+
+export default class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+
+    return (
+      <ThemeProvider theme={theme}>
+        <Component {...pageProps} />
+      </ThemeProvider>
+    )
+  }
+}
diff --git a/examples/with-styled-components-rtl/pages/_document.js b/examples/with-styled-components-rtl/pages/_document.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import Document, { Head, Main, NextScript } from 'next/document'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+import stylisRTLPlugin from 'stylis-plugin-rtl'
+
+export default class MyDocument extends Document {
+  static getInitialProps({ renderPage }) {
+    const sheet = new ServerStyleSheet()
+
+    const page = renderPage(App => props =>
+      sheet.collectStyles(
+        <StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
+          <App {...props} />
+        </StyleSheetManager>
+      )
+    )
+
+    const styleTags = sheet.getStyleElement()
+
+    return { ...page, styleTags }
+  }
+  render() {
+    return (
+      <html>
+        <Head>{this.props.styleTags}</Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/examples/with-styled-components-rtl/pages/index.js b/examples/with-styled-components-rtl/pages/index.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Title = styled.h1`
+  font-size: 50px;
+  color: ${({ theme }) => theme.colors.primary};
+  text-align: left;
+`
+
+export default () => <Title>My page</Title>