Skip to content

Instantly share code, notes, and snippets.

@pshev

pshev/header.js

Created Feb 16, 2018
Embed
What would you like to do?
preact-fela basic usage
import {h} from 'preact'
import {connect} from 'preact-fela'
const Header = ({title, styles}) =>
<header className={styles.container}>
<h1 className={styles.title}>{title}</h1>
</header>
const container = () => ({
textAlign: 'center',
padding: '20px',
height: '200px'
})
const title = ({theme, size}) => ({
lineHeight: 1.2,
fontSize: size,
color: theme.colors.primary
})
export default connect({
container,
title
})(Header)
import Preact, {h} from 'preact'
import {createRenderer} from 'fela'
import {Provider, ThemeProvider} from 'preact-fela'
import Header from './header'
const renderer = createRenderer()
const theme = {
colors: {
primary: 'red'
}
}
Preact.render((
<Provider renderer={renderer}>
<ThemeProvider theme={theme}>
<Header title="Hello world" size="17px" />
</ThemeProvider>
</Provider>
), document.getElementById('root'))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment