rofrischmann/fela

# render

> This method is used for client-side only rendering.<br />For universal rendering, we recommend using [rehydrate](api/fela-dom/rehydrate).

Renders all cached styles into the DOM.<br />
It also adds a change listener to automatically add newly rendered styles.

## Arguments

| Argument       | Type                                                                     | Description                                                      |
| -------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------- |
| renderer       | [_Renderer_](api/fela/renderer)                                          | The renderer providing the styles which are rendered to the DOM. |
| targetDocument | _[Document](https://developer.mozilla.org/en-US/docs/Web/API/Document)?_ | Document in which's head the styles are injected..               |

## Example

```javascript
import { createRenderer } from 'fela'
import { render } from 'fela-dom'

const rule = (props) => ({
  backgroundColor: 'red',
  fontSize: props.size,
  color: 'blue',
})

const renderer = createRenderer()

renderer.renderRule(rule, { size: '12px' }) // => a b c

render(renderer)

// automatically adds the rule to the stylesheet
renderer.renderRule(rule, { size: '15px ' }) // => a d c
```