qlaffont / rosetty-react

Complete Intl/I18n solution for React

Rosetty React

Complete Intl/I18n solution for React based on Rosetty. Old Owner: @flexper

Usage

//In your app.js file, add the following code:

import { RosettyProvider } from 'rosetty-react';
import { fr } from 'date-fns/locale';

const locales = { fr: { dict: {}, locale: fr } };
const defaultLanguage = 'fr';

const App = ({ children }) => (
  <RosettyProvider locales={locales} defaultLanguage={defaultLanguage}>
    {children}
  </RosettyProvider>
);

module.exports = App;

//In your components file, add the following code:

import { useRosetty } from 'rosetty-react';

const Home = () => {
  const { t } = useRosetty();
  return <h1>{t('home')}</h1>;
};

module.exports = Home;

API

RosettyProvider

Options

Field Name	Type	Description
locales	Record<string, Language>	Specify dictionnary and locale to use for each lang
defaultLanguage	string?	Specify default language to use (should be the same as config)

Return: Rosetty Context HOC + {actualLang: string} who contain your current language

Return a component who instantiate the Rosetty Context.

WARNING FOR LOCALE !

You need to import locale from date-fns package.

const { enGB } = require('date-fns/locale');

Maintain

This package use TSdx. Please check documentation to update this package.