What is fractal-react-adapter?

Forked from @sumul's original fractal-react-adapter, the adapter lets you use React as a template engine in Fractal. It's based on Fractal's Handlebars adapter. This adapter aims to maintain a React flavor rather than achieve complete feature parity with the Handlebars adapter. The goal is to facilitate writing React components that can easily be used in other projects.

Installation

Install the adapter via NPM:

npm i --save @aminohealth/fractal-react-adapter

Plug it into your fractal.js file like so:

const reactAdapter = require("fractal-react-adapter")();
fractal.components.engine(reactAdapter);
fractal.components.set("ext", ".jsx");

The adapter uses Babel to compile React components via @babel/register (which hooks into require or import and automatically routes those files through Babel). By default, @babel/register is configured to compile .jsx files and use the @babel/preset-react preset, but you can override these with any valid @babel/register config (see Configuration below).

// Default babel-register config
{
  extensions: ['.jsx'],
  presets: ['@babel/preset-react']
}

The adapter also uses babel-plugin-module-resolver to expose Fractal's component handles as node module names. This allows you to move a component around in the file system without worrying about rewriting your imports.

import Button from "@button";

const Button = require("@button");

Configuration

These options can be overridden when the adapter is set up.

• babelConfig: any valid configuration options for @babel/register
• renderMethod: 'renderToStaticMarkup' or 'renderToString' (see ReactDOMServer)

const reactAdapter = require("fractal-react-adapter")({
  babelConfig: {
    plugins: ["@babel/plugin-proposal-class-properties"]
  },
  renderMethod: "renderToString"
});