React Overlays

This page is about a feature of fluent-react 0.6.0.

Translations in Fluent can include simple HTML markup. fluent-react will match them with props to <Localized>. If the prop is a React element, its content will be replaced by the localizable content found in the markup the translation.

<Localized
    id="create-account"
    confirm={
        <button onClick={createAccount}></button>
    }
    cancel={
        <Link to="/"></Link>
    }>
    <p>{'<confirm>Create account</confirm> or <cancel>go back</cancel>.'}</p>
</Localized>

The overlaid result will include the source elements passed as props interpolated into the translation:

<p>
    <button onClick={createAccount}>Create account</button> or <Link to="/">go back</Link>.
</p>

Technical details

When fluent-react sees markup in the translation it parses the translation string using a <template> element. This creates a safe inert DocumentFragment with a hierarchy of text nodes and HTML elements. Any unknown elements (e.g. cancel in the example above) are parsed as HTMLUnknownElements. fluent-react then tries to match all elements found in the translation with props passed to the <Localized> component. If a match is found, the element passed as a prop is cloned with the translated content taken from the DocumentFragment used as children.