useFela

useFela is React hook(new tab) that provides a universal

css

function. It also provides access to both renderer and theme.

Arguments

Argument	Type	Default
props	Object	An object of props that is used to render rules.

Returns

(Object): The hook interface

Interface

Property	Type	Description
css	function	A function that accepts a list of style object and/or rule and returns a single className.
theme	Object	The theme object which is passed down via context
renderer	Renderer	The renderer that is passed down via context

Imports

Note: Due to lack of support for hooks, useFela is currently only available for react-fela and preact-fela.

import { useFela } from 'react-fela'
import { useFela } from 'preact-fela'

Example

function RedOnBlue({ children }) {
  const { css } = useFela()

  return (
    <div className={css({ backgroundColor: 'blue', color: 'red' })}>
      {children}
    </div>
  )
}

Passing props

const rule = ({ color }) => ({
  backgroundColor: 'blue',
  color,
})

function RedOnBlue({ children, ...otherProps }) {
  const { css } = useFela(otherProps)

  return <div className={css(rule)}>{children}</div>
}

// Usage
const Usage = <RedOnBlue color="red" />

Passing multiple styles

function RedOnBlue({ children, customStyle }) {
  const { css } = useFela()

  return (
    <div
      className={css({ backgroundColor: 'blue', color: 'red' }, customStyle)}>
      {children}
    </div>
  )
}

// Usage
const Usage = <RedOnBlue customStyle={{ fontSize: 12 }} />