Skip to content

Instantly share code, notes, and snippets.

@wschenk
wschenk / index.css
Last active November 28, 2017 21:48
create-react-app rmwc example index.js version 1
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.app {
display: flex;
flex-direction: row;
box-sizing: border-box;
@wschenk
wschenk / feed_basic.js
Created November 28, 2017 21:46
create-react-app rmwc example
import React, {Component} from 'react'
import {Button, Elevation} from 'rmwc'
class FeedItem extends Component {
state = {height: 4}
render() {
return (
<Elevation
z={this.state.height}
@wschenk
wschenk / feed_full.js
Created November 28, 2017 21:59
create-react-app rmwc demo
import React, {Component} from 'react'
import {Button, Elevation} from 'rmwc'
import Helmet from 'react-helmet'
class FeedItem extends Component {
state = {height: 4}
click = () => { this.props.theme( this.props.primary, this.props.secondary ) }
render() {
@wschenk
wschenk / index.js
Last active November 30, 2017 21:28
material-ui fonts example
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import WebFont from 'webfontloader'
WebFont.load({
google: {
families: ['Roboto:300,500,700']
@wschenk
wschenk / navbar.js
Created November 29, 2017 19:52
create-react-app material-ui navbar example
import React, {Component} from 'react'
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
import AccountCircle from 'material-ui-icons/AccountCircle';
@wschenk
wschenk / drawer.js
Last active November 30, 2017 22:40
material-ui drawer
import React, {Component} from 'react'
import Drawer from 'material-ui/Drawer';
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import Divider from 'material-ui/Divider';
import InboxIcon from 'material-ui-icons/Inbox';
class MyDrawer extends Component {
render() {
return (
<Drawer
@wschenk
wschenk / login.js
Created November 30, 2017 22:55
material-ui example login form
import React, {Component} from 'react';
import Button from 'material-ui/Button';
import TextField from 'material-ui/TextField';
import Dialog, {
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
withMobileDialog
} from 'material-ui/Dialog';
@wschenk
wschenk / feed_basic.js
Last active December 4, 2017 19:28
material-ui example feed
import React, {Component} from 'react'
import { withStyles } from 'material-ui/styles'
import Paper from 'material-ui/Paper'
import Button from 'material-ui/Button'
const styles = theme => ({
feed: {
width: '100%',
display: 'flex',
flexDirection: 'column',
@wschenk
wschenk / App.js
Created December 1, 2017 12:15
material-ui example
import React, { Component } from 'react';
import { withStyles } from 'material-ui/styles';
import Drawer from './drawer'
import Navbar from './navbar'
import Login from './login'
import Feed from './feed_basic'
const drawerWidth = 216;
const styles = theme => ({
@wschenk
wschenk / App.js
Created December 4, 2017 18:46
material-ui with themes
import React, { Component } from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import { withStyles } from 'material-ui/styles';
import Drawer from './drawer'
import Navbar from './navbar'
import Login from './login'
import Feed from './feed_basic'
import purple from 'material-ui/colors/purple';
import green from 'material-ui/colors/green';