fe.md

fe

Fe is a convenient replacement for React's createElement.
It is heavily inspired by glam and basically works the same.

Fe directly renders style objects, which are passed to the css prop of JSX components by using FelaComponent internally.

Usage

Fe is especially made to replace createElement when using JSX.
The best way to achieve that, is to use the /* @jsx fe */ override.

/* @jsx fe */
import { fe } from 'react-fela'

/* @jsx fe */
import { fe } from 'preact-fela'

/* @jsx fe */
import { fe } from 'inferno-fela'

Example

const style = {
  color: 'red',
  ':hover': {
    color: 'blue'
  }
}

// => <div class="a b">Hello</div>
const Fragment = () => (
  <div css={style}>
    Hello
  </div>
)

Third-Party Classes

We can also pass a custom className that is automatically prepended.

const style = {
  color: 'red',
  ':hover': {
    color: 'blue'
  }
}

// => <div class="custom-class a b">Hello</div>
const Fragment = () => (
  <div css={style} className="custom-class">
    Hello
  </div>
)