This method is used for universal rendering where styles are prerender on the server. For client-side only rendering, we recommend using render directly.

Rehydrates the renderer's cache from existing <style> elements.
It is primarily used to rehydrate the cache from server-rendered CSS.

It automatically connects the renderer with the DOM by calling render once finished rehydrating.


Argument Type Description
renderer Renderer The renderer which's cache is rehydrated.


Assuming we have the following server-rendered elements:

<style data-fela-type="RULE">.a{color:red}.b{color:blue}</style>
import { createRenderer } from 'fela'
import { rehydrate } from 'fela-dom'

const renderer = createRenderer()


const rule = props => ({
  color: props.color

renderer.renderRule(rule, { color: 'red' }) // => a
renderer.renderRule(rule, { color: 'green' }) // => c
renderer.renderRule(rule, { color: 'blue' }) // => b

results matching ""

    No results matching ""