https://github.com/houhoucoop/react-i18n

i18n for React handling translations
https://github.com/houhoucoop/react-i18n

Last synced: 9 days ago
JSON representation

i18n for React handling translations

• Host: GitHub
• URL: https://github.com/houhoucoop/react-i18n
• Owner: houhoucoop
• Created: 2021-04-15T15:52:25.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-04-15T16:00:23.000Z (over 3 years ago)
• Last Synced: 2024-02-01T08:03:12.331Z (10 months ago)
• Language: HTML
• Size: 525 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-i18n

> i18n utilities for React handling translations.

[![NPM](https://img.shields.io/npm/v/react-i18n.svg)](https://www.npmjs.com/package/react-i18n) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install --save react-i18n

```

## Example

```jsx

import { IntlProvider, useIntl } from 'react-i18n'

const translations = {

    EN: {

      sample: {

        hello: 'Hello World!'

      },

    },

    FR: {

      sample: {

        hello: 'Bonjour Monde!'

      },

    },

};

const Example = () => (

  

    

  

)

const MyComponent = () => {

  const { t, setLocale } = useIntl()

  return (

    <>

      
{t('sample.hello')}

       setLocale('fr')}>Switch to `FR`

    >

  )

}

```

## Usage

### IntlProvider


> Component used to provide i18n context to child components.

-   `locale` - The locale language, it will be converted to uppercase in order to matches the keys in translations.

-   `translations` - This should be an object

    where keys are locales, and values are maps of message keys to translated

    strings.

### useIntl

> Provides a React hook which lets you

call into the translate function directly.

-   `t` - The locale to translate things into.

-   `setLocale` - Set current locale to another.

```jsx

import { Intl } from 'react-i18n'

const Component = () => {

  const { t, setLocale } = useIntl()

  return (

    <>

      
{t('sample.hello')}

       setLocale('fr')}>Switch to `FR`

    >

  );

}

```

### Intal


> Get the translate function in render props way.

-   `t` - The locale to translate things into.

-   `setLocale` - Set current locale to another.

```jsx

import { useIntl } from 'react-i18n'

const Component = () => (

  

    {({ t, setLocale }) => {

      return (

        
{t('sample.hello')}

         setLocale('fr')}>Switch to `FR`

      )

    }}

  

)

```

## License


MIT © [@houhoucoop](https://github.com/@houhoucoop)