rofrischmann/fela

# useFela

useFela is React [hook](https://reactjs.org/docs/hooks-intro.html) 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](basics/rules/style-object) and/or [rule](basics/rules) and returns a single className. |
| theme    | _Object_                        | The theme object which is passed down via context                                                                                       |
| renderer | _[Renderer](api/fela/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.

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

## Example

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

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

### Passing props

```jsx
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

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