Styling library for React and Fela
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs Tweak StyledComponent docs Aug 5, 2017
lib Add Blockquote and Image components Sep 12, 2017
.babelrc Improve StyledComponent and FelaProvider API, add Theme component May 6, 2017
.eslintrc.js Init May 6, 2017
.gitignore Init May 6, 2017
.npmignore Init May 6, 2017
LICENSE Init May 6, 2017
README.md Tweak StyledComponent docs Aug 5, 2017
package-lock.json 2.0.0 Sep 27, 2017
package.json 2.0.0 Sep 27, 2017

README.md

Fela Components

npm

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