Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 

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)

About

Super simple preact-fela bindings

Topics

Resources

Packages

No packages published
You can’t perform that action at this time.