Super simple preact-fela bindings
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.gitignore
.npmignore
README.md
package.json

README.md

preact-fela-simple

Fela

Simple and tiny preact bindings for fela

npm gzipped size npm downloads

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)