useTranslations equivalent for class components

[moaazbhnas228]

Is your feature request related to a problem? Please describe.

I have an <ErrorBoundary /> which can only be a class component, and I need to localize its content, but I can't use useTranslations hook as its a class component.

Describe the solution you'd like

An equivalent to useTranslations for class components. A higher-order component for example:

class ErrorBoundary extends React.Component {}

export default withTranslations(ErrorBoundary)

Describe alternatives you've considered

I used withRouter hoc to get the locale, and then conditionally rendered the text based on that locale:

return (
    <Error
        title={
            isRtl
                ? "عذراً! حدث خطأ ما من جانبنا. رجاءاً حاولي مرةً أخرى."
                : "Sorry! Something went wrong on our end. Please try again."
        }
    />
);

export default withRouter(ErrorBoundary);

[amannn]

Hi @moaazbhnas228 and thank you for your request!

Good point that error boundaries are currently only available as classes. I hope the React team will address this in the not too distant future. Since I'm quite certain that this will be adjusted on the React side, I wouldn't want to add new API for this.

I'd suggest to implemented your error boundary with react-error-boundary and implement your i18n labels in the FallbackComponent.

Hope this helps!

[moaazbhnas228]

Makes sense. Will use react-error-boundary. Thanks!