indoqa-react-fela

An opinionated starting point we use to include fela in our React projects. It covers:

A preconfigured React component that handles createRenderer and mountNode.

Theming support by providing a base theme and a function to merge themes.

Basic components like Box, Flex and Text.

Usage

To activate the standard preconfigured fela setup, just wrap your application in <IndoqaFela> without any further options:

importReactfrom'react'

import{render}from'react-dom'

import{IndoqaFela}from'indoqa-react-fela'

importDemoAppfrom'./DemoApp.react.js'

constfela={

config:{

plugins:[

...presetWeb

],

},

init:(renderer)=>{

renderer.renderStatic('html, body, #app {height: 100%}')

},

resetCss:true,

}

render(

<IndoqaFela fela={fela}>

<DemoApp />

</IndoqaFela>,

document.getElementById('app')

)

The react-fela <Provider> creates a renderer using the provided config object and adds the css to the HTML head section by lazily adding <style id="fela-stylesheet"> inside <head> with support for hot reloading.

Please not that wrapping <IndoqaFela> around a Redux store might cause problems with hot-reloading because a Redux store must not be recreated.