Customizing

Flare supports two approaches to customizing UI elements. One option is to use CSS to change the appearance of Flare's default markup. The other option is to render entirely different HTML by plugging in custom React components.

CSS

When customization requirements are minimal, the CSS approach may be sufficient. First, it is recommended to import the included CSS file (under ./node_modules/flare/css/flare.css or ./node_modules/flare-core/css/flare-core.css). From there, a classless CSS framework may be a good option. Otherwise, you can inspect the HTML structure of the rendered Flare UI and add your own custom CSS as needed.

Note that the flare package only supports the CSS approach. For more advanced use cases, you will need to install flare-core instead and proceed to the next section.

Custom Components

The RunFlare component, available in the flare-core package, offers full control over how the Flare UI is rendered through its components prop, which allows any of the following components to be overridden:

The components prop accepts a record optionally containing any number of these components. For example, the TextBox component could be overridden as follows:

const components = {
  TextBox: ({ label, value, onValueChange }) => (
    <label>
      {label}
      <input
        type="text"
        value={value}
        onChange={e => onValueChange(e.target.value)} />
    </label>
  )
};

function App() {
  return (
    <RunFlare
      flare={/* ... */}
      handler={/* ... */}
      components={components} />
  );
}

Note that, as demonstrated above, components must be defined outside of the render function that instantiates RunFlare to avoid rendering issues.

Example

A complete example of a Flare UI rendered using custom components is available on GitHub. You can also click the button below to launch it in CodeSandbox.