.gitignore

node_modules
package-lock.json

README.md

Preact + Material-UI example

Preact is a fast 3kB alternative to React with the same modern API.

This example uses shows how to use Material UI 4 with Preact X and Preact CLI 3.

How to use

git clone blah preact-mui
cd preact-mui
npm install

Want a src/ directory?

Run this command to move the app into a src/ directory. Preact CLI detects and uses it automatically.

mkdir src && mv *.js src

Run your app:

# start up a development server:
npm start

# create a production build in `build/`:
npm run build

# start a production server locally
npm start

Tip: start the development server on a custom port using PORT=1337 npm start

App.js

import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Link from '@material-ui/core/Link';
import ProTip from './ProTip';

function MadeWithLove() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      Based on the{' '}
      <Link href="https://github.com/mui-org/material-ui/tree/master/examples/preact">
        original example
      </Link>
      {' '}by the Material-UI team.
    </Typography>
  );
}

export default function App() {
  return (
    <Container maxWidth="sm">
      <Box my={4}>
      <Typography variant="h4" component="h1" gutterBottom>
          Material UI Preact Example
        </Typography>
        <Typography variant="h5" component="h2" gutterBottom>
          Material UI 7 + Preact X + Preact CLI
        </Typography>
        <ProTip />
        <MadeWithLove />
      </Box>
    </Container>
  );
}

index.js

import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/styles';
import App from './App';
import theme from './theme';

export default () => (
  <ThemeProvider theme={theme}>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <CssBaseline />
    <App />
  </ThemeProvider>
);

package.json

{
  "name": "preact-mui-example",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.2.1",
    "preact": "^10.0.0-rc.0",
    "preact-render-to-string": "^5.0.6"
  },
  "devDependencies": {
    "eslint": "5.12.0",
    "eslint-config-developit": "^1.1.1",
    "preact-cli": "^3.0.0-rc.3",
    "serve": "^11.1.0"
  },
  "scripts": {
    "start": "preact watch --no-esm",
    "build": "preact build",
    "serve": "serve build -s -n"
  },
  "eslintConfig": {
    "extends": "developit"
  }
}

ProTip.js

import { makeStyles } from '@material-ui/core/styles';
import Link from '@material-ui/core/Link';
import SvgIcon from '@material-ui/core/SvgIcon';
import Typography from '@material-ui/core/Typography';

function LightBulbIcon(props) {
	return (
		<SvgIcon {...props}>
			<path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
		</SvgIcon>
	);
}

const useStyles = makeStyles(theme => ({
	root: {
		margin: theme.spacing(6, 0, 3)
	},
	lightBulb: {
		verticalAlign: 'middle',
		marginRight: theme.spacing(1)
	}
}));

export default function ProTip() {
	const classes = useStyles();
	return (
		<Typography className={classes.root} color="textSecondary">
			<LightBulbIcon className={classes.lightBulb} />
      Pro tip: See more{' '}
			<Link href="https://material-ui.com/getting-started/page-layout-examples/" target="_blank">
        page layout examples
			</Link>{' '}
      on the Material-UI documentation.
		</Typography>
	);
}

theme.js

import { red } from '@material-ui/core/colors';
import { createMuiTheme } from '@material-ui/core/styles';

// A custom theme for this app
const theme = createMuiTheme({
	palette: {
		primary: {
			main: '#556cd6'
		},
		secondary: {
			main: '#19857b'
		},
		error: {
			main: red.A400
		},
		background: {
			default: '#fff'
		}
	}
});

export default theme;