This package has been deprecated

Author message:

this package has been moved to react-tinacms-i18n

@tinalabs/react-tinacms-localization

react-tinacms-localization

Getting started

yarn add @tinacms/react-tinacms-localization

Create a new instance of the localization api

You can pass the list of languages and the icons but these are optiona

import { LocalizationApi } from '@tinacms/react-tinacms-localization';
const localization = new LocalizationApi();

Add the localization api to the cms

const cms = (cms = new TinaCMS({
  enabled: props.pageProps.preview,
  //...
  apis: {
    //...
    localization: localization,
  },
}));

or

cms.api.registerApi('localization', localization);

Note: Unlike Plugins, APIs should be registered when the CMS is instantiated, and never removed.

Where you that cms object must be passed to the tina provider

<TinaProvider cms={this.cms}>//...</TinaProvider>

Making a translation

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 '@tinacms/react-tinacms-localization';
//..
const data = {heading: 'this is a heading'}
const defaultData = {heading: 'heading', body: 'this is the body text'}
const [t, i18n ] = useTranslation(data, defaultData)
//..
// 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 '@tinacms/react-tinacms-localization';
//..
const data = {some: {nested: {data: 'hello world'}}}
const [t, i18n ] = useTranslation(data, defaultData)

//..
<h1>
{t('some.nested.data')}
</h1>

Switching the locale

i18n.locale = { region: 'ca', language: 'en' };

Or if your not using the useTranslation hook

cms.api.localization.locale = { region: 'ca', language: 'en' };

Fetching data based on the locale

Get the formatted current locale

const currentLocale  = i18n.getFormateLocale()

or

const currentLocale = cms.api.localization.getFormateLocale();

Now one can use the currentLocal when fetching data

const data = await fetch(`www.example.com/api/some/path/${currentLocale}`);

Adding the the toolbar plugin

In a global scope or on the page you wish to add this plugin you can use the

import { useCMS } from 'tinacms';
import { LocalePickerToolbarPlugin } from '@tinacms/react-tinacms-localization';

//...

const cms = useCMS();
React.useEffect(() => {
  cms.plugins.add(LocalePickerToolbarPlugin);
}, []);

Using the locale prompt

Register the plugin

import { useLocalePromptPlugin, PromptRenderer } from "react-tinacms-localization"
//...
useLocalePromptPlugin(data, options)
//...
//... somewhere in the component tree render
<PromptRenderer />

This registers a prompts plugin that will render a prompt in edit mode letting the user know that no localization for this page exists

Generate Docs

yarn docs

or

npm run docs

This well generate the docs and you can open docs/docs/index.html in your browser to view

API DOCS