Skip to content

Commit 0a2466a

Browse files
froltimneutkens
frol
authored and
timneutkens
committed
Added React-MD example (vercel#940)
1 parent 59281ad commit 0a2466a

File tree

4 files changed

+144
-0
lines changed

4 files changed

+144
-0
lines changed

‎examples/with-react-md/README.md

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
2+
# Example app with react-md
3+
4+
## How to use
5+
6+
Download the example [or clone the repo](https://github.com/zeit/next.js):
7+
8+
```bash
9+
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-react-md
10+
cd with-react-md
11+
```
12+
13+
Install it and run:
14+
15+
```bash
16+
npm install
17+
npm run dev
18+
```
19+
20+
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
21+
22+
```bash
23+
now
24+
```
25+
26+
## The idea behind the example
27+
28+
This example features how yo use [react-md](https://react-md.mlaursen.com/) (React Material Design) with Next.js.
29+
30+
I recommend reading [layout-component](../layout-component) example next to learn how to reuse the layout across the pages.

‎examples/with-react-md/package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "with-react-md",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"dev": "next",
6+
"build": "next build",
7+
"start": "next start"
8+
},
9+
"dependencies": {
10+
"next": "^2.0.0-beta",
11+
"react": "^15.4.2",
12+
"react-addons-css-transition-group": "^15.4.2",
13+
"react-addons-transition-group": "^15.4.2",
14+
"react-dom": "^15.4.2",
15+
"react-md": "^1.0.1"
16+
},
17+
"author": "",
18+
"license": "ISC"
19+
}

‎examples/with-react-md/pages/index.js

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import Head from 'next/head'
2+
import Link from 'next/link'
3+
4+
import Avatar from 'react-md/lib/Avatars'
5+
import Button from 'react-md/lib/Buttons/Button'
6+
import FontIcon from 'react-md/lib/FontIcons'
7+
import ListItem from 'react-md/lib/Lists/ListItem'
8+
import NavigationDrawer from 'react-md/lib/NavigationDrawers'
9+
import SelectField from 'react-md/lib/SelectFields'
10+
11+
const avatarSrc = 'https://cloud.githubusercontent.com/assets/13041/19686250/971bf7f8-9ac0-11e6-975c-188defd82df1.png'
12+
13+
const drawerHeaderChildren = [
14+
<Avatar
15+
key={avatarSrc}
16+
src={avatarSrc}
17+
role='presentation'
18+
iconSized
19+
style={{ alignSelf: 'center', marginLeft: 16, marginRight: 16, flexShrink: 0 }}
20+
/>,
21+
<SelectField
22+
id='account-switcher'
23+
defaultValue='Jonathan'
24+
menuItems={['Jonathan', 'Fred']}
25+
key='account-switcher'
26+
position={SelectField.Positions.BELOW}
27+
className='md-select-field--toolbar'
28+
/>
29+
]
30+
31+
const NavigationLink = (props) => {
32+
const { href, as, children, ..._props } = props
33+
return (
34+
<div {..._props}>
35+
<Link href={href} as={as}>
36+
<a className='md-list-tile' style={{padding: 0, overflow: 'hidden'}}>
37+
{children}
38+
</a>
39+
</Link>
40+
</div>
41+
)
42+
}
43+
44+
export default () => {
45+
const closeButton = (
46+
<Button
47+
icon
48+
tooltipLabel='Close the interactive demo'
49+
tooltipDelay={150}
50+
tooltipPosition='left'
51+
>
52+
close
53+
</Button>
54+
)
55+
56+
return (
57+
<div>
58+
<Head>
59+
<link rel='stylesheet' href='/static/react-md.light_blue-yellow.min.css' />
60+
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' />
61+
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Material+Icons' />
62+
</Head>
63+
<NavigationDrawer
64+
navItems={[
65+
<ListItem
66+
key='0'
67+
component={NavigationLink}
68+
href='/'
69+
leftIcon={<FontIcon>inbox</FontIcon>}
70+
tileClassName='md-list-tile--mini'
71+
primaryText={'Root'}
72+
/>,
73+
<ListItem
74+
key='1'
75+
component={NavigationLink}
76+
href='/non-existing-page'
77+
leftIcon={<FontIcon>star</FontIcon>}
78+
tileClassName='md-list-tile--mini'
79+
primaryText={'404 page'}
80+
/>
81+
]}
82+
contentClassName='md-grid'
83+
drawerHeaderChildren={drawerHeaderChildren}
84+
mobileDrawerType={NavigationDrawer.DrawerTypes.TEMPORARY_MINI}
85+
tabletDrawerType={NavigationDrawer.DrawerTypes.PERSISTENT_MINI}
86+
desktopDrawerType={NavigationDrawer.DrawerTypes.PERSISTENT_MINI}
87+
toolbarTitle='Hello, World!'
88+
toolbarActions={closeButton}
89+
>
90+
<h1>Hello Next.js!</h1>
91+
</NavigationDrawer>
92+
</div>
93+
)
94+
}

‎examples/with-react-md/static/react-md.light_blue-yellow.min.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../node_modules/react-md/dist/react-md.light_blue-yellow.min.css

0 commit comments

Comments
 (0)