node package manager



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.


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

import React from 'react'
import {render} from 'react-dom'
import {IndoqaFela} from 'indoqa-react-fela'
import DemoApp from './DemoApp.react.js'
const fela = {
  config: {
    plugins: [
  init: (renderer) => {
    renderer.renderStatic('html, body, #app {height: 100%}')
  resetCss: true,
  <IndoqaFela fela={fela}>
    <DemoApp />

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.


  • Provide a renderer configuration.
  • The default configuration uses (FelaPresetWeb)(


  • Get access to the renderer after it is being created.
  • The default value is a nop function.


  • If set to true, reset.css is applied as static css to start clean.
  • The default value is true.


IndoqaFela provides a buildTheme(customTheme) function. The custom theme will be merged with the basic theme using deepmerge.


This package comes with a simple demo app in src/playground. Use yarn start and point your browser to http://localhost:3000