A HoC (Higher-order Component) that creates a presentational React component using the rendered rule as className.

It automatically composes rules and passed props for nested Fela components.


Argument Type Default Description
rule Function
Either a style object or rule function which satisfies the rule behavior and returns a valid style object.
type string?
div Component or HTML element which is used as the render base element.
Note: If a Component is passed, then it receives a className property.
passThroughProps Array?
A list of props that get passed to the underlying element.
Alternatively a function of props that returns an array of prop names.


(Function): Stateless functional component.


import { createComponent } from 'react-fela'
import { createComponent } from 'preact-fela'
import  { createComponent } from 'inferno-fela'


const title = ({ small, fontSize, color }) => ({
  lineHeight: small ? 1.2 : 1.5,
  fontSize: fontSize + 'px',
  color: color

const Title = createComponent(title, 'div', [ 'onClick' ])

<Title fontSize={23} color="red" onClick={...}>Hello World</Title>
// <div className="a b c" onclick="...">Hello World</div>

Passing Props

Using the passThroughProps parameter allows us to pass props to the underlying DOM element. This is helpful if you want to pass e.g. events such as onClick. There are some props that are automatically passed and thus do not need to be specified explicitly:

  • className
  • style
  • id

If passing a className, it will automatically be concatenated with the Fela generated className. This allows composing multiple Fela Components.

Functional passThroughProps

You may also pass a function of props as passThroughProps. It must return an array of prop names. e.g. to pass all props you can do:

const Title = createComponent(title, 'div', props => Object.keys(props))

// shorthand
const Title = createComponent(title, 'div', Object.keys)

Note: The same can be achieved via createComponentWithProxy.

Dynamically passing Props

This use case is especially important for library owners. Instead of passing the passThroughProps to the createComponent call directly, one can also use the passThrough prop on the created component to achieve the same effect.

const title = () => ({
  color: 'red'

const Title = createComponent(title)

<Title onClick={...} passThrough={[ 'onClick' ]}>Hello World</Title>
// => <div className="a" onclick="...">Hello World</div>

Extending Styles

It's possible to extend component styles with an extend prop that can be either an object or a function.

const title = () => ({
  color: 'red'

const Title = createComponent(title)

<Title extend={{ color: 'blue' }}>Hello World</Title>,
// => <div className="a">Hello World</div>
// => .a { color: blue }

const extendTitle = props => ({
  color: props.color

<Title extend={extendTitle} color="green">Hello World</Title>
// => <div className="a">Hello World</div>
// => .a { color: green }

Custom Type on Runtime

To change the type on runtime and/or for each component, you may use the as prop.

const title = props => ({
  color: 'red'

const Title = createComponent(title)

<Title as="h1">Hello World</Title>
// => <h1 className="a">Hello World</h1>

Static Style Object

Instead of rendering a props-depending rule, we can also use plain objects to render static style objects.

const style = {
  fontSize: '15px',
  color: 'red'

const Title = createComponent(style, 'h1')

<Title>Hello World</Title>
// => <h1 className="a b">Hello World</h1>

results matching ""

    No results matching ""