preact-fela-simple

Motivation

Why not use preact-fela official bindings? First of all official bindings are about 2.5KB while this package is about 300B. At the same time I think it has a simpler and more straight-forward API.

Usage

If you are already familiar with preact-fela you can take a look at the following gists: preact-fela basic usage and preact-fela-simple basic usage.

API

The API has two parts: Provider to put fela's renderer and your custom theme on the context and style higher-order component (HOC) to style Preact components.

Provider

Wrap your root component in a Provider to put fela's renderer on the context. You can also give it a theme property to make it available for the components styled with the style HOC.

import Preact, {h} from 'preact'
import createRenderer from 'fela'
import {Provider} from 'preact-fela-simple'

const htmlRenderer = Preact.render
const styleRenderer = createRenderer()

const theme = {
  mainColor: 'peachpuff',
  fontFamily: 'Comic Sans MS'
}

htmlRenderer((
  <Provider renderer={styleRenderer} theme={theme}>
    <Root />
  </Provider>
), document.getElementById('root'))

style

style is a HOC that is used to add styling to Preact components. It takes either a styles object or a function that returns a styles object given the current component's props. What that means is that if the rules don't need props or theme, you don't have to bother creating them as functions.

basic use

import {h} from 'preact'
import {style} from 'preact-fela-simple'

const Button = ({styles}) => 
  <button className={styles.button}>
    Hello world
  </button>

export default style({
  button: {
    padding: '10px',
    color: 'red'
  }
})(Button)

using a theme

import {h} from 'preact'
import {style} from 'preact-fela-simple'

const Button = ({styles}) => 
  <button className={styles.button}>
    Hello world
  </button>

export default style(({theme}) => ({
  button: {
    padding: '10px',
    color: theme.mainColor
  }
}))(Button)

accessing props

import {h} from 'preact'
import {style} from 'preact-fela-simple'

const Button = ({styles}) => 
  <button className={styles.button}>
    Hello world
  </button>

export default style(({primary}) => ({
  button: {
    fontSize: primary ? '15px' : '12px',
    padding: '10px',
    color: 'cornsilk'
  }
}))(Button)