Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

use-locales

0.6.5 • Public • Published

use-locales

React hooks to bring locales in your browser

npm npm bundle size CircleCI

How it works?

  • Detects your browser lang
  • Try to find locales in locales storages
  • If locales are not in locales storages or lang store in local storage is different that the browser lang
    • Load accurate locales, if it doesn't find one matching the browser lang, fallback to en
    • Set downloaded locales and lang in localStorage
  • Add locales in context
  • As a developper give a path (no path means root path) to search from your loaded locales

How to use it?

  1. Install the package: yarn add use-locales
  2. Add a locales provider to your application:
import React from 'react'
import ReactDOM from 'react-dom'
import { LocalesProvider } from 'use-locales'
import App from './app'
 
ReactDOM.render(
  <LocalesProvider hashKey={process.env.REACT_APP_GIT_SHA || Date.now()}>
    <App />
  </LocalesProvider>
  document.getElementById('root'),
)
  1. Use locales in your components
import React from 'react'
import { useLocales } from 'use-locales'
 
const App = () => {
  const messages = useLocales()
 
  return (
    <div>
      {messages.welcome}
    </div>
  )
}
  1. Maintain your locales Your locales must accessibles from http in <public-path>/locales/<lang>.json
  • <public-path> is loaded from PUBLIC_PATH env variable
  • <lang> is 2 chars, like en or fr

Exemple of files: public/locales/en.json

{
  "welcome": "Welcome!"
}

public/locales/fr.json

{
  "welcome": "Bienvenue !"
}

API

  • <LocalesProvider hashKey>: provider, your nodes must be wrapped by this to use hooks, we recommand to set it at your application root element.
    • hashKey: is used to detect if locales have to be fetched before the timeout. A good practice is to use the git commit hash!
  • useLang(): string: returns the detect language use by the browser
  • useLocales(path: string?): object: given the path, returns locales from <public-path>/locales/<lang>.json
    • if path is not set it will returns all the locales

Feel free to open PR/Issues !

Feel free to discuss or open PR to have a better package all together! Right know I use this package into:

Install

npm i use-locales

DownloadsWeekly Downloads

22

Version

0.6.5

License

MIT

Unpacked Size

50.2 kB

Total Files

13

Last publish

Collaborators

  • avatar