{"_id":"@accessitech/i18n-redux-toolkit","name":"@accessitech/i18n-redux-toolkit","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@accessitech/i18n-redux-toolkit","version":"1.0.0","description":"An internationalization @reduxjs/toolkit slice package.","main":"index.js","author":{"name":"AccessiTech LLC","email":"accessit3ch@gmail.com"},"license":"MIT","private":false,"homepage":"https://accessitech.github.io/AccessiTech/tree/main/packages/i18n","publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/AccessiTech/AccessiTech.git"},"scripts":{"test":"echo \"Error: run tests from root\" && exit 1"},"bugs":{"url":"https://github.com/AccessiTech/AccessiTech/issues"},"dependencies":{"@reduxjs/toolkit":"^1.8.2","react-redux":"^8.0.2"},"devDependencies":{"react-test-renderer":"^18.2.0"},"peerDependencies":{"react":"^18.0.0"},"_id":"@accessitech/i18n-redux-toolkit@1.0.0","dist":{"shasum":"1cbdc8d4b9d63fd7a56cf72bad58d8f6a4418e5f","integrity":"sha512-g6aSXxnfiFpVE7iNtJArCbrcC/cMLZOiAzmm/AWlcBHnGRnzVmOUQLvHIJsFwR0XzFR1GFyQgd6dJaqtDORwFw==","tarball":"https://registry.npmjs.org/@accessitech/i18n-redux-toolkit/-/i18n-redux-toolkit-1.0.0.tgz","fileCount":9,"unpackedSize":9846,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYVsQfIjySM3dIqHoQVkTJtEK6rjRL+Mcy/HpXaUGypAIhAK+nviVfF+uZKDThw6m0ATg9Q1OdvlEMgnxLH+mV0tWo"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8r7tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/YQ//UrFaNlMem/DkU/d3bM4AX8c6rPmr6f//bKlQ53YZGwPEKN+T\r\n/a8gV3OaBJQJ7z97QLP3TLtXGOijJEJtEfh1ZQOyVRjJYHY7c1PTy3NaDmZd\r\nUmFBKeFFSZ3l+9bgVukOfq5pZnw6MgjJtJQDamPEOkUIsQNI/aj/4LXZPJUL\r\nKa2G3TDOHM3O5xeZtILmWd1ebx86uA7mWMpmbaiQOE5LCs5d34WxrxiO/rSF\r\nOPt1D6R1Tkte6C/XTJA/UYDMo/ccjPRjw41SMXmB4m9Kbzmvv8rgfDMFDyZx\r\nXkJ5psikwYuA/kgQC5TbaZew0NAr1akfN50cdFLA3gyGUojAWGKcddq+D+pS\r\nrE7zAtgTgP6Ze/yfsstnhRuTAIxqjo4ux/ilelw+Z3331w7rLD6px1xQDb5h\r\npoCGWNK7616PFGgnE3yk1a7sbr6znYH/IheBwRXvswzGk1xOV16Lzjc4TWxI\r\nJfkLypdcxzJxzHvdi/RNxNmBfEXNEfylhYq9mjKNnEYjJCvRHAqK//a9V5/O\r\nohhCYZizaQ0+tQmiAuPBYFN+99FOndFODyeDwtoXw1akgjNK92O5QK3ieHFs\r\nVOAcp3wUGlOmxvmLJd2/veH3/15zwP48QR9gvqGTzvKFsohVjRT/HDogS0TG\r\n9FZQzP1iUob/frwWgDKG4ayccFAnq2NtBp8=\r\n=n1HF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"accessitech","email":"accessiT3ch@gmail.com"},"directories":{},"maintainers":[{"name":"accessitech","email":"accessiT3ch@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/i18n-redux-toolkit_1.0.0_1660075756874_0.33702495857516457"},"_hasShrinkwrap":false}},"time":{"created":"2022-08-09T20:09:16.798Z","1.0.0":"2022-08-09T20:09:17.083Z","modified":"2022-08-09T20:09:17.227Z"},"maintainers":[{"name":"accessitech","email":"accessiT3ch@gmail.com"}],"description":"An internationalization @reduxjs/toolkit slice package.","homepage":"https://accessitech.github.io/AccessiTech/tree/main/packages/i18n","repository":{"type":"git","url":"git+https://github.com/AccessiTech/AccessiTech.git"},"author":{"name":"AccessiTech LLC","email":"accessit3ch@gmail.com"},"bugs":{"url":"https://github.com/AccessiTech/AccessiTech/issues"},"license":"MIT","readme":"# `@accessitech/i18n-redux-toolkit`\n\n> Internationalization for `@reduxjs/tookit` projects\n\nThis package manages internationalization (i18n) of display text in React apps using ReduxJs Toolkit, and consists of a Redux Toolkit slice, hooks, actions, and helpers.\n\n## Usage\n\n1. Add the redux slice to your store\n2. initialize your translations\n3. Get and Set the language of your App\n4. Use Translations in your App\n\n```JS\n// store.js\n\nimport i18nSlice, { i18nSliceName } from '@accessitech/i18n-redux-toolkit';\n\nexport default configureStore({\n  reducer: {\n    [i18nSliceName]: i18nSlice.reducer,\n  },\n});\n```\n\n```JS\n// App.js\n\nimport {\n  initTranslations,\n  getBrowserLanguage,\n  setLang,\n  useT,\n} from '@accessitech/i18n-redux-toolkit';\nimport translations from './your/local/translations';\n\nstore.dispatch(initTranslations(translations));\n\nconst App = () => {\n\n  useEffect(() => {\n    const browserLang = getBrowserLanguage(translations);\n    store.dispatch(setLang(browserLang));\n  }, []);\n\n  return <p>{useT('DISPLAY_STRING_KEY')}</p>;\n}\n\nexport default App;\n```\n\n## Requirements\n\nThe Redux slice in this module is only compatible with `@reduxjs/toolkit`, not `react-redux`.\n\n### Translations\n\nThis module does not contain any translations itself, and must be provided an object containing [Chrome i18n message](https://developer.chrome.com/docs/extensions/mv3/i18n-messages/) formatted translations paired with language id keys.\n\n```JS\nconst translations = {\n  'en': { ... },\n  'es': { ... },\n  'etc': { ... },\n};\n```\n\n## API\n\n### Action Creators\n\n#### `initTranslations(translationsLib)`\n\nAdds parsed translations library to the store.\n\n```JS\n/**\n * Initialize Translations\n * @param {object} translationsLib Chrome i18n formatted paired with language id key\n * @returns {object} payload object for the reducer\n*/\n```\n\n#### `setLang(lang)`\n\nSets the language in the store.\n\n```JS\n/**\n * Set Language\n * @param {string} lang Language id key \n */\n```\n\n### Hooks\n\n#### `useCurrentLang()`\n\nGet the id key of the current language.\n\n```JS\n/**\n * Use Current Language\n * @returns {string|null} language key for current language\n */\n```\n\n#### `useLanguageKeys()`\n\nGet language keys for loaded translation languages.\n\n```JS\n/**\n * Use Language Keys\n * @returns {[string]|null} language keys of translated display string libs\n */\n```\n\n#### `useT(stringKey), useT(stringKey, lang)`\n\nTranslate display strings.\n\n```JS\n/**\n * Use Translation\n * @param {string} stringKey unique identifier for selecting translated string\n * @param {string} lang (optional) lang code\n * @returns {string|null} translated string or null if lang\n */\n```\n\n#### `useTranslations()`\n\nGet translations library object from store.\n\n```JS\n/**\n * Use Translations\n * @returns {object|null} \n */\n```\n\n### Helpers\n\n#### `parseTranslation(translation)`\n\nGet converted display string from i18n formatted objects.\n\n```JS\n/**\n * Parse Translation\n * @param {*} translation Translation object following Chrome i18n formatting\n * @returns {string} Translated string formatted with placeholders\n */\n```\n\n#### `getBrowserLanguage(translations)`\n\nGet users' preferred language from the browser.\n\n```JS\n/**\n * Get Browser Language\n * @param {*} translations Library of Translations objects \n * @returns {string} key of preferred language as per window.navigator\n */\n```\n","readmeFilename":"README.md"}