Fela Components

fela-components is a styling library for Fela and React.

By preferring regular components over HOCs, this packages makes it easier to create ah-hoc components, significantly decreasing naming fatigue when working on larger apps. Why would every styled DOM node have to have a name?

All of this while remaining fully compatible with all of the awesomeness of Fela itself, from atomic class names to the outstanding plugin system.

This is an unofficial package. For official Fela bindings for React, see react-fela.

Install

# Using npm
npm install --save fela-components

# Using yarn
yarn add fela-components

Minimal Example

import React from "react";
import ReactDOM from "react-dom";
import { createRenderer } from "fela";
import { StyledComponent, Provider } from "fela-components";

const renderer = createRenderer();
const mountNode = document.getElementById("app");

ReactDOM.render(
  <Provider renderer={renderer}>
    <StyledComponent visual={{ padding: "15px", color: "cornflowerblue" }}>
      This will be properly styled.
    </StyledComponent>
  </Provider>,
  mountNode
)

Usage

See API reference for more detail.

Inspiration

• react-fela
• jsxstyle