fe

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

Fe directly renders inline style objects, which are passed to the css prop of JSX components.
It uses 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>
)

results matching ""

    No results matching ""