react-i18next#Translation TypeScript Examples

The following examples show how to use react-i18next#Translation. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: boundary.tsx    From tobira with Apache License 2.0 5 votes vote down vote up 
public render(): ReactNode {
        const error = this.state.error;
        if (!error) {
            return this.props.children;
        }

        // Try to retrieve user data if we have any.
        let userData: UserProviderProps["data"] = undefined;
        if (error instanceof APIError) {
            // This check is not perfect, as it does not make sure the
            // currentUser has all the fields that are actually expected. But
            // given that this object comes from the API and the API is well
            // defined, we just assume if there is a `currentUser`, it has the
            // correct form.
            userData = error.response?.data?.currentUser;
        }

        return (
            <UserProvider data={userData}>
                <Root nav={[]}>
                    <Translation>{t => (
                        <div css={{ margin: "0 auto", maxWidth: 600 }}>
                            <div css={{ display: "flex", justifyContent: "center" }}>
                                <Card kind="error"><ErrorDisplay error={error} /></Card>
                            </div>
                            <details css={{
                                border: "1px solid var(--grey65)",
                                borderRadius: 4,
                                padding: "6px 8px",
                                marginTop: "min(150px, 12vh)",
                                marginBottom: 16,
                            }}>
                                <summary css={{ }}>
                                    {t("errors.detailed-error-info")}
                                </summary>
                                <pre css={{
                                    backgroundColor: "var(--grey97)",
                                    borderRadius: 4,
                                    padding: "12px 16px",
                                    fontSize: 14,
                                    marginTop: 10,
                                }}>
                                    <code css={{ whiteSpace: "pre-wrap" }}>
                                        {error.toString()}
                                    </code>
                                </pre>
                            </details>
                        </div>
                    )}</Translation>
                </Root>
            </UserProvider>
        );
    }