Localization API added in React SDK

Manan Tank

thirdweb React SDK now has a localization API that allows you to change the language used in UI components or override the texts used in the UI

A new prop locale is added to the ThirdwebProvider component that takes a locale object containing all the strings used by all the components.

React SDK comes out of the box with Spanish and Japanese locale functions, but you can add support for any language you want just by passing an object with the required strings

import { ThirdwebProvider, es } from "@thirdweb-dev/react";
 
const spanish = es();
 
<ThirdwebProvider locale={spanish}>
  <App />
</ThirdwebProvider>;

import { ThirdwebProvider, ja } from "@thirdweb-dev/react";
 
const japanese = ja();
 
<ThirdwebProvider locale={japanese}>
  <App />
</ThirdwebProvider>;

If no locale prop is set, it defaults to en as shown below

import { ThirdwebProvider, en } from "@thirdweb-dev/react";
 
const english = en();
 
<ThirdwebProvider locale={english}>
  <App />
</ThirdwebProvider>;

Try the ConnectWallet Playground to see the localized UI in action!

Since locale takes an object, you can decide to pass a completely custom object or override the default locale objects. There is a handy API for overriding locale object on the locale function:

import { ThirdwebProvider, en } from "@thirdweb-dev/react";
 
// override some texts
const english = en({
  connectWallet: {
    confirmInWallet: "Confirm in your wallet",
  },
  wallets: {
    metamaskWallet: {
      connectionScreen: {
        inProgress: "Awaiting Confirmation",
        instruction:
          "Accept connection request in your MetaMask wallet",
      },
    },
  },
});
 
<ThirdwebProvider locale={english}>
  <App />
</ThirdwebProvider>;

If you want to support any other language, you can pass a custom object to locale prop with all the required strings.

import { ThirdwebProvider } from "@thirdweb-dev/react";
 
<ThirdwebProvider locale={{ .... }}>
  <App />
</ThirdwebProvider>;