Usage with ReasonML

The Reason bindings ship with some core Fela APIs, React hooks and all plugins, enhancers and presets.

Note: If you want to use older APIs such as

createComponent

connect

, we recommend using bs-react-fela(new tab) instead.

yarn add reason-fela

# you'll also need at least fela and react-fela
yarn add fela react-fela

In your

bsconfig.json

, include

"reason-fela"

in the

bs-dependencies

Creating a Fela renderer

First let's create our Fela Renderer instance. We can pass all the config options that the Fela renderer accepts.

FelaRenderer.re

open Fela;

/* you can also use all plugins and enhancers via Fela.Plugins and Fela.Enhancers
   e.g. Fela.Plugins.prefixer, Fela.Enhancers.web */
let renderer = Renderer.make(
  RendererConfig.make(
    ~plugins=Presets.web,
    ~selectorPrefix="reason-",
    ()
  )
)

Passing the Renderer

Now that we have the renderer, we need to provide it to our app.
We can also optionally pass a theme down here, which is useful for dynamic theming.

Tip: If we just want to define some static theme properties, one can also leverage a

Theme.re

module and access it directly due to all files/modules being globally available.

App.re

open ReactFela;

let theme = {
  "colors": {
    "primary": "blue",
    "secondary": "red"
  }
};

[@react.component]
let make = (~children) =>
  <RendererProvider renderer>
    <ThemeProvider theme>
      children
    </ThemeProvider>
  </RendererProvider>

Using the Hooks

Now that our app is aware of the renderer, we can use the provided hooks in any component. The hooks are similar to react-fela's useFela, but split into 3 different hooks for convenience.

RedText.re

open ReactFela;

[@react.component]
let make = (~children) => {
  let css = useFela();
  let theme = useTheme();
  let renderer = useRenderer();

  /* we can also do stuff we the renderer */
  renderer##renderStatic(Fela.style({"backgroundColor": "red"}), "body");

  <div
    className={css([
      Fela.style({"fontSize": "18pt", "color": theme##colors##primary}),
    ])}>
    "I'm red"->React.string
  </div>;
};

Convenience Hooks

ReactFela also includes two convenience hooks

useFela1

and

useFela2

that take just 1 or 2 parameters respectively instead of passing a list.

open ReactFela;

[@react.component]
let make = (~children) => {
  let css1 = useFela1();
  let css2 = useFela2();

  <div className={css1(Fela.style({"color": "red"}))}>
    <div
      className={css2(
        Fela.style({"color": "red"}),
        Fela.style({"color": "red"}),
      )}
    />
  </div>;
};

Server-side Rendering

If we're running a universal app, we also want to make sure that styles are correctly rendered and rehydrated when doing server-side rendering.
Therefore, reason-fela also provides bindings to fela-dom.

Server.re

open Fela.Dom;

let htmlString = renderToMarkup(renderer);
let sheetList = renderToSheetList(renderer);

sheetList -> Belt.Array.forEach(({type_, css, media, support, rehydration}) => {
  /* render your style nodes here */
});

Using bs-css-core

You can also opt-in bs-css-core(new tab) module which was forked from bs-css(new tab) for a more convenient, type-safe API.

yarn add @astrada/bs-css-core

In your

bsconfig.json

, include

"@astrada/bs-css-core"

in the

bs-dependencies

Now the only thing we need is a type converter which can be done using the

"%identity"

helper. You probably want to create a new utility mode e.g.

FelaUtils

that looks sth. like this:

FelaUtils.re

external fromBsCssCore: Css.style => Fela.style = "%identity";

Now we can use it in our components: