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

Feature add react uwp example (#2375)

Browse source 
* feat: Add react-uwp examples

* fix: remove log from ThemeWrapper

* feat: Add README.md

* fix: Fixed right version

* fix: Use JavaScript Standard Style

* fix: Fixed wrong next version
This commit is contained in:
myxvisual 2017-06-28 03:10:26 +08:00 committed by Tim Neutkens
parent 4eb86dc5f8
commit 9da6524d30
5 changed files with 139 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
examples/with-react-uwp/README.md Normal file
View file

@ -0,0 +1,29 @@
[![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-uwp)
# React-UWP example
## 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-uwp
cd with-react-uwp
```
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 [react-uwp](https://github.com/myxvisual/react-uwp) (React Components that Implement Microsoft's UWP Design & Fluent Design.) with Next.js.

15
examples/with-react-uwp/components/ThemeWrapper.js Normal file
View file

@ -0,0 +1,15 @@
import React, { Component } from 'react'
import Theme from 'react-uwp/Theme'
export class ThemeWrapper extends Component {
render () {
const { children, style, ...props } = this.props
return (
<Theme {...props} style={(props && props.theme) ? props.theme.prepareStyles(style) : void 0}>
{children}
</Theme>
)
}
}
export default ThemeWrapper

16
examples/with-react-uwp/package.json Normal file
View file

@ -0,0 +1,16 @@
{
"name": "with-react-uwp",
"version": "1.0.0",
"dependencies": {
"babel-core": "^6.25.0",
"next": "latest",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-uwp": "^1.0.9"
},
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}

30
examples/with-react-uwp/pages/_document.js Normal file
View file

@ -0,0 +1,30 @@
import React from 'react'
import PropTypes from 'prop-types'
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
static async getInitialProps ({ req }) {
return req
? { userAgent: req.headers['user-agent'] }
: { userAgent: navigator.userAgent }
}
static contextTypes = { theme: PropTypes.object };
render () {
return (
<html lang='en'>
<Head>
<title>My page</title>
<meta charSet='utf-8' />
<meta name='viewport' content='user-scalable=0, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height' />
<meta name='theme-color' content='yellowgreen' />
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}

49
examples/with-react-uwp/pages/index.js Normal file
View file

@ -0,0 +1,49 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ThemeWrapper from '../components/ThemeWrapper'
import getTheme from 'react-uwp/styles/getTheme'
import {
Button,
ColorPicker,
DatePicker,
ProgressRing
} from 'react-uwp'
class Index extends Component {
static getInitialProps ({ req }) {
let userAgent
if (process.browser) {
userAgent = navigator.userAgent
} else {
userAgent = req.headers['user-agent']
}
return { userAgent }
}
static contextTypes = { theme: PropTypes.object }
render () {
return (
<ThemeWrapper
style={{
padding: '20px 0',
minHeight: '100vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-around'
}}
theme={getTheme({ userAgent: this.props.userAgent })}
>
<Button>Test Button</Button>
<DatePicker />
<ColorPicker />
<ProgressRing size={50} />
</ThemeWrapper>
)
}
}
export default Index