yarn add react-tinacms-i18n
We pass out app component along with the configuration for the plugin to the with tina plugin. If you dont want to use this helper function and want to setup stuff mananualy read here
import { withI18n } from 'react-tinacms-i18n';
const AppWrapper = withI18n(App, {
ApiOptions: {
localeList: [
{ language: { code: 'en', label: 'English' }, region: { code: 'CA', label: 'Canada' } },
{ language: { code: 'fr', label: 'French' }, region: { code: 'CA', label: 'Canada' } },
{ language: { code: 'en', label: 'English' }, region: { code: 'US', label: 'United States' } },
{ language: { code: 'sp', label: 'Spanish' }, region: { code: 'US', label: 'United States' } },
],
},
});
Note: this most also be inside the tina provider to your app return statement may look something like this
export default () => {
const cms = new TinaCMS({
sidebar: {
position: 'displace',
},
enabled: true,
toolbar: true,
});
return (
<TinaProvider cms={cms}>
<AppWrapper />
</TinaProvider>
);
};
When we want to make a translation we can use the useTranslation
hooks to localize our app. useTranslation
returns a t
function that is used for translating text and an instance of the localization plugin (called i18n)
import { useTranslation } from 'react-tinacms-i18n';
//..
const data = {heading: 'this is a heading'}
const fallbackData = {heading: 'heading', body: 'this is the body text'}
const t = useTranslation(data, fallbackData)
//..
// this displays 'this is a heading'
<h1>
{t('heading')}
</h1>
// ...
// this displays 'this is the body text'
<p>
{t('body')}
</p>
It also works with nested data
import { useTranslation } from 'react-tinacms-i18n';
//..
const data = {some: {nested: {data: 'hello world'}}}
const t = useTranslation(data, fallbackData)
//..
<h1>
{t('some.nested.data')}
</h1>
import { useI18n } from 'react-tinacms-i18n';
const i18n = useI18n()
i18n.setLocale({ region: { code: 'CA', label: 'Canada' }, language: { code: 'en', label: 'English' } });
Get the formatted current locale
const currentLocale = i18n.getFormateLocale();
Now one can use the currentLocal when fetching data
const data = await fetch(`www.example.com/api/some/path/${currentLocale}`);
Register the plugin Note: this requires a peer dependency @tinalabs/react-tinacms-prompts
so first first
npm i @tinalabs/react-tinacms-prompts --save
First wrap your app or a component with the prompt provider. The only stipulation is that it must be a child of the tina provider
import { PromptProvider } from '@tinalabs/react-tinacms-prompts';
<PromptProvider>
<App />
</PromptProvider>;
Next we registers a prompts plugin
that will render a prompt in edit mode letting the user know that no localization for this page exists. This will render when the given condition is true.
import { useLocalePromptPlugin } from 'react-tinacms-i18n';
useLocalePromptPlugin(condition, options);
This can be a bit confusing to do but may be necessary in some use cases.
The General idea is this
<TinaProvider cms={cms}>
// register the localization plugin in here
<I18nProvider>
// register the toolbar plugin in here
<App />
</I18nProvider>
</TinaProvider>
you can see how the withI18n
function does this
export const withI18n = (Component: any, options: SetupProps) => {
return (props: any) => {
const cms = useCMS();
const i18n = new ReactLocalizationAPI(
options.ApiOptions.localeList,
options.ApiOptions.imgMap
);
cms.registerApi('localization', i18n);
const Wrapper = () => {
useEffect(() => {
cms.plugins.add(LocalePickerToolbarPlugin);
}, []);
return <Component {...props} />;
};
return (
<I18nProvider i18n={i18n}>
<Wrapper />
</I18nProvider>
);
};
};
yarn docs
or
npm run docs
This well generate the docs and you can open docs/docs/index.html
in your browser to view
Generated using TypeDoc