preact-fela basic usage

header.js

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)

index.js

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'))