Embedding in React

The RunFlare component provides the means to embed a Flare UI in a React application. This short guide explains how the RunFlare component works.

Overview

The RunFlare component renders a Flare UI wherever it exists in the component tree and invokes a callback each time the value changes in response to user input.

The UI and callback are passed via flare and handler props, respectively.

Generic Implementation

RunFlare is a generic component, which allows it to work with any Flare UI regardless of the value it produces. The only constraint is that the UI must produce the same kind of value that the callback accepts as input.

This may be best understood by examining the prop types. Given a generic argument A, which can be any type:

type RunFlareProps<A> = {
  flare: Flare<A>;
  handler: (a: A) => void;
  // ...
};

Common Use Case

While the generic implementation of RunFlare supports a wide variety of use cases, it may be helpful to consider perhaps the most common use case of displaying some element as a function of user input, as shown on the Examples page. For this use case, ReactNode (or a more restrictive subtype) may be substituted in place of A:

type RunFlareProps<ReactNode> = {
  flare: Flare<ReactNode>;
  handler: (a: ReactNode) => void;
};

Thus, the UI passed to the flare prop must produce a type of value that is assignable to ReactNode. If it does not, then the map function may offer a solution by providing the means to transform the value that the UI produces.

Similarly, the handler prop callback must accept a ReactNode as input and produce a side effect.

In this case, the side effect is that of mutating a ReactNode value held in state. Usually, the useState hook is all that is required:

const [flareOutput, setFlareOutput] = useState<ReactNode>();

// ...

<RunFlare
  flare={/*...*/}
  handler={setFlareOutput} />

Finally, the flareOutput node can be rendered wherever it belongs in the component tree, e.g.

<div className="output">
  {flareOutput}
</div>

Example

A complete example of a Flare UI embedded inside of React is available on GitHub. You can also click the button below to launch it in CodeSandbox.