render

This method is used for client-side only rendering.
For universal rendering, we recommend using rehydrate.

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

Arguments

Argument	Type	Description
renderer	Renderer	The renderer providing the styles which are rendered to the DOM.
targetDocument	Document(new tab)?	Document in which's head the styles are injected..

Example

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