Skip to main content

To use Tolgee with your Gatsby application, use React integration library together with Gatsby i18n support.

Tolgee for React provides simple API to create multi-lingual React application. With Tolgee i18n library for React you can enjoy all Tolgee i18n features.

To see Next with Gatsby in action, check this example app.

npm i @tolgee/react

Get started!

1. Create project in Tolgee platform

Go to Tolgee Cloud app or access your self-hosted instance and create a project. Then obtain your API key.

2. Setup Tolgee integration

Install the npm packages.

npm i @tolgee/react gatsby-plugin-react-intl

Prepare your gatsby-config.js.

module.exports = {
plugins: [
{
resolve: `gatsby-plugin-react-intl`,
options: {
path: `${__dirname}/src/i18n`,
languages: [`en`, `cs`],
defaultLanguage: `en`,
redirect: true,
},
},
],
};

Then wrap your code with TolgeeProvider

import { TolgeeProvider, DevTools, Tolgee, FormatSimple } from '@tolgee/react';
import { useIntl } from 'gatsby-plugin-react-intl';

const tolgee = Tolgee().use(DevTools()).use(FormatSimple()).init({
defaultLanguage: 'en',
apiKey: process.env.GATSBY_TOLGEE_API_KEY,
apiUrl: process.env.GATSBY_TOLGEE_API_URL,
});

export const AppWrapper: React.FC = ({ children }) => {
const { locale, messages } = useIntl();

useMemo(() => {
// change tolgee language without emitting events
tolgee.setEmmiterActive(false);
tolgee.changeLanguage(locale);
tolgee.addStaticData({ [locale]: messages });
tolgee.setEmmiterActive(true);
}, [locale, messages]);

return (
<TolgeeProvider tolgee={tolgee} fallback="Loading...">
{children}
</TolgeeProvider>
);
};

3. Use T component to translate your texts

import { T } from "@tolgee/react";

export const Component = () => {
return (
<h1>
<T keyName="translate_me">Translate me!</T>
</h1>
)
}

Now you are able to Alt + Click & translate your texts!

Explore the Docs and check out example app!

Continue exploring...

More integrations

Show all