i18n-components
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

i18n-components

A very small library to help with translations in React
Please report any problems.

Tutorial

Installation

> npm i -s i18n-components

Templates

A list of translations must be created, this uses the template as the key.

const templates = {
    'Hello, World!': {
        'en-ZA': 'Howzit!',
    },
    'Hello, {0}. The number is {1}.': { 
        'en-ZA': 'The number is {1}, hey {0}.',
    },
}

Creating a context

Your main component needs to be wrapped. If culture is left off, it will try and get the culture from the browser.

    import { Translations } from 'i18n-components';
 
    function App()
    {
        return (
            <Translations templates={templates} culture="en-ZA" >
                <MyOtherComponents />
            </Translations>
        );
    }

Using a translation

    import { i18n } from 'i18n-components';
 
    function SayHi()
    {
        return (<p>{i18n`Hello, World!`}</p>);
    }
 
    function WithVariables()
    {
        const name = 'Jack';
        const [number, setNumber] = useState(0);
        return (
            <div>
                <p>{i18n`Hello, ${name}. The number is ${number}.`}</p>
                <button type="button" onClick={() => setNumber(number + 1)}>+</button>
            </div>
        );
    }

Should render as

Howzit!

The number is 0, hey Jack.

+

Language fallback

    const templates = {
    'Hello, World!': {
        'pt': 'Olá Mundo!',
        'pt-BR': 'e aí',
    },
}

Language and culture

<Translations templates={templates} culture="pt-BR" >
    <p>{i18n`Hello, World!`}</p>
</Translations>

will return

e aí

Just language

<Translations templates={templates} culture="pt-PT" >
    <p>{i18n`Hello, World!`}</p>
</Translations>

will fall back to the language only translation

Olá Mundo!

Fall back to template

<Translations templates={templates} culture="es-ES" >
    <p>{i18n`Hello, World!`}</p>
</Translations>

will fall back to the template because no language can be found.

Hello, World!

Using useI18n Hook

If you want to use a translation in a property you will need to use the hook.

<input value={useI18n`Hello, World!`} readOnly />

or

function HelloBox()
{
    const hello = useI18n`Hello, World!`;
    return (<input value={hello} readOnly />);
}

Package Sidebar

Install

npm i i18n-components

Weekly Downloads

1

Version

1.0.7

License

MIT

Unpacked Size

10.6 kB

Total Files

15

Last publish

Collaborators

  • jonathanpeel