fe

Fe is a convenient replacement for React's createElement(new tab).
It is heavily inspired by glam(new tab) 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>
)