https://github.com/pshev/preact-fela-simple

Super simple preact-fela bindings
https://github.com/pshev/preact-fela-simple

bindings fela preact preact-fela

Last synced: 19 days ago
JSON representation

Super simple preact-fela bindings

• Host: GitHub
• URL: https://github.com/pshev/preact-fela-simple
• Owner: pshev
• Created: 2017-04-06T14:27:10.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-19T11:54:52.000Z (almost 7 years ago)
• Last Synced: 2024-02-22T19:45:34.721Z (10 months ago)
• Topics: bindings, fela, preact, preact-fela
• Language: JavaScript
• Size: 12.7 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# preact-fela-simple



  





  Simple and tiny preact bindings for fela

  


  


  

  

  



### 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](https://gist.github.com/pshev/888b8a7c33f2850fe67516f7aac2337d) and 

[preact-fela-simple basic usage](https://gist.github.com/pshev/e1fd6d5e2be6fd29308252a8f24c74c4).




#### 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.

```js

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((

  

    

  

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

```js

import {h} from 'preact'

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

const Button = ({styles}) => 

  

    Hello world

  

export default style({

  button: {

    padding: '10px',

    color: 'red'

  }

})(Button)

```

###### using a theme

```js

import {h} from 'preact'

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

const Button = ({styles}) => 

  

    Hello world

  

export default style(({theme}) => ({

  button: {

    padding: '10px',

    color: theme.mainColor

  }

}))(Button)

```

###### accessing props

```js

import {h} from 'preact'

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

const Button = ({styles}) => 

  

    Hello world

  

export default style(({primary}) => ({

  button: {

    fontSize: primary ? '15px' : '12px',

    padding: '10px',

    color: 'cornsilk'

  }

}))(Button)

```