rofrischmann/fela

# Renderer

We have learned about all basic renderable elements which are rules, keyframes and fonts. Now we can finally learn how to actually render and use them within our application. In order to do so we need a renderer.

The renderer is a single object that coordinates the whole rendering workflow. It also uses a special caching mechanism to access previously rendered styles faster and reduce the amount of DOM manipulations.

To create a new renderer, Fela provides the [`createRenderer`](api/fela/createRenderer) function.

```javascript
import { createRenderer } from 'fela'

const renderer = createRenderer()
```

We may optionally pass a configuration object as second parameter.<br />
Read the [Renderer Configuration](advanced/renderer-configuration) article for further information.

## Rendering Styles

The renderer provides dedicated render methods for each of the three renderable components which we introduced in the previous articles.

- [renderRule](api/fela/renderer#renderrule)
- [renderKeyframe](api/fela/renderer#renderkeyframe)
- [renderFont](api/fela/renderer#renderfont)

> **Tip**: Read the tips and tricks of each render method first. Especially the [renderRule](api/fela/renderer#renderrule) tips are very helpful for beginners as well as advanced users.

### renderRule

Takes a [rule](basics/rules) and some `props` to resolve the rule. If no `props` are passed it defaults to an empty object.<br />
It maps each declaration to unique atomic CSS classes and returns them combined.

```javascript
import { createRenderer } from 'fela'

const renderer = createRenderer()

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

renderer.renderRule(rule) // => a b
renderer.renderRule(rule, { fontSize: '12px' }) // => a b c
renderer.renderRule(rule, { fontSize: '15px' }) // => a b d
```

```css name=output.css
.a {
  background-color: blue;
}
.b {
  color: red;
}
.c  {
  font-size: 12px;
}
.d {
   font-size: 15px;
}
```

### renderKeyframe

Takes a [keyframe](basics/keyframes) and some `props` to resolve the keyframe. If no `props` are passed it defaults to an empty object.
It returns the rendered animation name.
It also adds the keyframe with both `@-webkit-` and `@-moz-` prefixes, but we will ignore them here for brevity.

```javascript
import { createRenderer } from 'fela'

const renderer = createRenderer()

const keyframe = (props) => ({
  from: { color: 'green' },
  to: { color: props.toColor },
})

renderer.renderKeyframe(keyframe, { toColor: 'red' }) // => k1
renderer.renderKeyframe(keyframe, { toColor: 'blue' }) // => k2
```

```css name=output.css
@keyframes k1 {
  from {
    color: green;
  }
  to {
    color: red;
  }
}

@keyframes k2 {
  from {
    color: green;
  }
  to {
    color: blue;
  }
}
```

### renderFont

Rendering [fonts](basics/fonts) is a bit different. `renderFont` takes the font family and an array of font source files as mandatory arguments and an optional object containing additional font properties.

```javascript
import { createRenderer } from 'fela'

const renderer = createRenderer()

const files = ['./fonts/Lato.ttf', './fonts/Lato.woff']

renderer.renderFont('Lato', files)
renderer.renderFont('Lato-Bold', files, { fontWeight: 'bold' })
renderer.renderFont('Lato-Bold-Alias', files, {
  fontWeight: 'bold',
  localAlias: ['Lato Bold', 'Lato-Bold'],
})
```

```css name=output.css
@font-face {
  font-family: 'Lato';
  src: url('./fonts/Lato.ttf') format(truetype), url('./fonts/Lato.woff') format(woff);
}

@font-face {
  font-family: 'Lato-Bold';
  src: url('./fonts/Lato.ttf') format(truetype), url('./fonts/Lato.woff') format(woff);
  font-weight: bold;
}
@font-face {
  font-family: 'Lato-Bold-Alias';
  src: local('Lato Bold'), local('Lato-Bold'),
    url('./fonts/Lato.ttf') format(truetype), url('./fonts/Lato.woff') format(woff);
  font-weight: bold;
}
```

## Advanced API

Check out the [API Reference - Renderer](api/fela/renderer) to learn about all of its methods. This article only describes the basic rendering methods. It does not include `clear`, `subscribe` or even `renderStatic`.

---

## Related

- [DOM Rendering](advanced/dom-rendering)
- [Server Rendering](advanced/server-rendering)
- [Renderer Configuration](advanced/renderer-configuration)
- [API Reference - Renderer](api/fela/renderer)
- [API Reference - `createRenderer`](api/fela/createRenderer)

### Tools

**[fela-native](https://github.com/robinweser/fela/tree/master/packages/fela-native)**<br />
Renderer for React Native