withLocalization

Sometimes it's useful to imperatively format a translation rather than rely on the declarative <Localized /> API. Good examples of this are the window.alert and window.confirm functions.

It's possible to connect any component to its enclosing LocalizationProvider using the withLocalization higher-order component (HOC).

import { withLocalization } from 'fluent-react/compat';

function HelloButton(props) {
    const { getString } = props;

    return (
        <button onClick={() => alert(getString('hello'))}>
            👋
        </button>
    );
}

export default withLocalization(HelloButton);

The connected component must be a descendant of a LocalizationProvider to have access to the translations stored there.