useFela

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

css

function as well as a

staticStyle

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 and static styles.

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.
staticStyle	function	A function that accepts the same arguments as renderStatic.
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 in Inferno, useFela is currently only available for React and Preact.

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 }} />

Accessing theme

function WithTheme() {
  const { theme } = useFela()

  return <div>Primary color is {theme.colors.primary}</div>
}

Rendering static styles

function WithTheme() {
  const { staticStyle } = useFela()

  staticStyle(
    {
      backgroundColor: 'blue',
    },
    'body'
  )

  return <div>Primary color is {theme.colors.primary}</div>
}