@matriarx/i18n-react v0.0.10

An internationalization and localization project for React. It contains a localization context provider built on the Intl browser API, several enumerations, utilities and support for translations.

🧚🏻‍♀️✨ Status 🌈☁️

🧚🏻‍♀️✨ Repository 📚🚀

🧚🏻‍♀️✨ Project 📚🎨

🧚🏻‍♀️✨ Requirements 🗝️🔒

🪄✨ nvm 🤷🏻‍♀️\ 🪄✨ node >= 18 💯\ 🪄✨ npm >= 8 💯

🧚🏻‍♀️✨ Setup 🚧🚀

🪄✨ npm i @matriarx/i18n-react

🧚🏻‍♀️✨ Usage ✨🦄

🧚🏻‍♀️✨ Context

import {LocaleContextProvider} from '@matriarx/i18n-react'

export const App = (): JSX.Element => {
  return (
    <LocaleContextProvider>
      <></>
    </LocaleContextProvider>
  )
}

export default App

🧚🏻‍♀️✨ Hook

import {useLocale} from '@matriarx/i18n-react'

const Example = (): JSX.Element => {
  const {Language, Region} = useLocale()

  return <></>
}

export default Example

🧚🏻‍♀️✨ Translations

import {LocaleContextProvider, Language} from '@matriarx/i18n-react'

import en from '/path/to/en.json'

const translations = new Map<string, Map<string, string>>()

translations.set(new Intl.Locale(Language.EN).maximize().baseName, new Map<string, string>(Object.entries(en)))

export const App = (): JSX.Element => {
  ...
  return (
    ...
    <LocaleContextProvider
      locale={new Intl.Locale(Language.EN)}
      translations={translations}
    >
      ...
    </LocaleContextProvider>
    ...
  )
}

export default App

The map key should be of the form <language>-<script>-<region>.

import {useLocale} from '@matriarx/i18n-react'

const Example = (): JSX.Element => {
  const {translate} = useLocale()

  return <>{translate('Hello World')</>
}

export default Example

🧚🏻‍♀️✨ Lazy

import {LocaleContextProvider, Language} from '@matriarx/i18n-react'

const translations = new Map<string, Map<string, string>>()
const uri = 'https://cdn.host.tld/en.json'

translations.set(new Intl.Locale(Language.EN).maximize().baseName, uri))

export const App = (): JSX.Element => {
  ...
  return (
    ...
    <LocaleContextProvider
      locale={new Intl.Locale(Language.EN)}
      translations={translations}
    >
      ...
    </LocaleContextProvider>
    ...
  )
}

export default App

To lazy load translation data you can provide a URI instead of a map.

🧚🏻‍♀️✨ Development ✨🔮

🧚🏻‍♀️✨ Requirements 🗝️🔒

🪄✨ git 💯\ 🪄✨ nvm 🤷🏻‍♀️\ 🪄✨ node >= 18 💯\ 🪄✨ npm >= 8 💯

🧚🏻‍♀️✨ Setup 🚧🚀

🪄✨ git clone https://github.com/matriarx/i18n-react.git\ 🪄✨ cd i18n-react\ 🪄✨ nvm use 18\ 🪄✨ npm install

🧚🏻‍♀️✨ Usage ✨🦄

🪄✨ npm start ~ Start lib/index.js.\ 🪄✨ npm run compile ~ Compile the source code using typescript.\ 🪄✨ npm run build ~ Create a production build using @swc/core.\ 🪄✨ npm run dev ~ Compile in watch mode to recompile on file changes.\ 🪄✨ npm run review ~ Statically analyze the codebase using typescript.\ 🪄✨ npm run lint ~ Lint the codebase using eslint.\ 🪄✨ npm run style ~ Style and format the codebase using prettier.\ 🪄✨ npm run test ~ Run the tests using jest.\ 🪄✨ npm run qa ~ Run review, lint, style and test.\ 🪄✨ npm run type ~ Generate types using typescript.\ 🪄✨ npm run clean ~ Clean up the project, remove all temporary files and the cache.\ 🪄✨ npm run prepare ~ Automatically run on npm install to add husky hooks to git for lint-staged.

🧚🏻‍♀️✨ Documentation 📚🔮

🪄✨ Project\ 🪄✨ Discussions\ 🪄✨ Issues\ 🪄✨ Wiki\ 🪄✨ Docs\ 🪄✨ Code of Conduct\ 🪄✨ Contributing\ 🪄✨ Security\ 🪄✨ Changelog\ 🪄✨ Release Notes\ 🪄✨ Authors\ 🪄✨ Contributors\ 🪄✨ Acknowledgements\ 🪄✨ Supporters\ 🪄✨ Contact\ 🪄✨ License

🧚🏻‍♀️✨ Collaboration ✨💕

Thank you to the authors who created this project, the contributors who collaborated, the supporters who help make it possible, as well as notable acknowledgements.

🧚🏻‍♀️✨ Contributors 💎🚀

🧚🏻‍♀️✨ License 🔮✨