@beinformed/ui 1.31.4 → 1.32.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.32.0](https://git.beinformed.com/public/nl.beinformed.bi.layout.lib.ui/compare/v1.31.4...v1.32.0) (2023-08-07)
+
+
+### Features
+
+* **useLocaleCodes:** add hook to retrieve available locale codes ([46d522f](https://git.beinformed.com/public/nl.beinformed.bi.layout.lib.ui/commit/46d522f263f7f90c136bcc26dd026c78898b1c5f))
+
 ## [1.31.4](https://git.beinformed.com/public/nl.beinformed.bi.layout.lib.ui/compare/v1.31.1...v1.31.4) (2023-07-28)
 
 

package/esm/hooks/useI18n.js

@@ -1,4 +1,5 @@
 import _JSON$stringify from "@babel/runtime-corejs3/core-js-stable/json/stringify";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import { useSelector } from "react-redux";
 import { createSelector } from "reselect";
 import memoize from "lodash/memoize";
@@ -21,5 +22,11 @@ const useTranslate = () => useSelector(getMessage);
 /**
  */
 const useLocale = () => useSelector(getLocale);
-export { useTranslate, useMessage, useLocale };
+const getLocaleCodes = createSelector(state => state.i18n.locales, locales => _mapInstanceProperty(locales).call(locales, locale => locale.code));
+
+/**
+ * Retrieve all available locale codes
+ */
+const useLocaleCodes = () => useSelector(getLocaleCodes);
+export { useTranslate, useMessage, useLocale, useLocaleCodes };
 //# sourceMappingURL=useI18n.js.map

package/esm/hooks/useI18n.js.map

@@ -1 +1 @@
-{"version":3,"file":"useI18n.js","names":["useSelector","createSelector","memoize","getLocales","getLocale","getMessage","locales","localeCode","id","defaultMessage","placeholders","_len","arguments","length","args","Array","_key","_JSON$stringify","useMessage","useTranslate","useLocale"],"sources":["../../src/hooks/useI18n.js"],"sourcesContent":["// @flow\nimport { useSelector } from \"react-redux\";\nimport { createSelector } from \"reselect\";\nimport memoize from \"lodash/memoize\";\n\nimport { getLocales, getLocale } from \"../redux/selectors/i18n\";\n\nconst getMessage = createSelector(\n  [getLocales, getLocale],\n  (locales, localeCode) =>\n    memoize(\n      (id: string, defaultMessage?: string, placeholders?: Object) =>\n        locales\n          .getLocale(localeCode)\n          .getMessage(id, defaultMessage, placeholders),\n      (...args) => JSON.stringify(args),\n    ),\n);\n\n/**\n */\nconst useMessage = (\n  id: string,\n  defaultMessage?: string,\n  placeholders?: Object | null,\n): any => useSelector(getMessage)(id, defaultMessage, placeholders);\n\n/**\n */\nconst useTranslate = (): ((...any) => any) => useSelector(getMessage);\n\n/**\n */\nconst useLocale = (): string => useSelector(getLocale);\n\nexport { useTranslate, useMessage, useLocale };\n"],"mappings":";AACA,SAASA,WAAW,QAAQ,aAAa;AACzC,SAASC,cAAc,QAAQ,UAAU;AACzC,OAAOC,OAAO,MAAM,gBAAgB;AAEpC,SAASC,UAAU,EAAEC,SAAS,QAAQ,yBAAyB;AAE/D,MAAMC,UAAU,GAAGJ,cAAc,CAC/B,CAACE,UAAU,EAAEC,SAAS,CAAC,EACvB,CAACE,OAAO,EAAEC,UAAU,KAClBL,OAAO,CACL,CAACM,EAAU,EAAEC,cAAuB,EAAEC,YAAqB,KACzDJ,OAAO,CACJF,SAAS,CAACG,UAAU,CAAC,CACrBF,UAAU,CAACG,EAAE,EAAEC,cAAc,EAAEC,YAAY,CAAC,EACjD;EAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAIC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;IAAJF,IAAI,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;EAAA;EAAA,OAAKC,eAAA,CAAeH,IAAI,CAAC;AAAA,CACnC,CACJ,CAAC;;AAED;AACA;AACA,MAAMI,UAAU,GAAGA,CACjBV,EAAU,EACVC,cAAuB,EACvBC,YAA4B,KACpBV,WAAW,CAACK,UAAU,CAAC,CAACG,EAAE,EAAEC,cAAc,EAAEC,YAAY,CAAC;;AAEnE;AACA;AACA,MAAMS,YAAY,GAAGA,CAAA,KAAyBnB,WAAW,CAACK,UAAU,CAAC;;AAErE;AACA;AACA,MAAMe,SAAS,GAAGA,CAAA,KAAcpB,WAAW,CAACI,SAAS,CAAC;AAEtD,SAASe,YAAY,EAAED,UAAU,EAAEE,SAAS"}
+{"version":3,"file":"useI18n.js","names":["useSelector","createSelector","memoize","getLocales","getLocale","getMessage","locales","localeCode","id","defaultMessage","placeholders","_len","arguments","length","args","Array","_key","_JSON$stringify","useMessage","useTranslate","useLocale","getLocaleCodes","state","i18n","_mapInstanceProperty","call","locale","code","useLocaleCodes"],"sources":["../../src/hooks/useI18n.js"],"sourcesContent":["// @flow\nimport { useSelector } from \"react-redux\";\nimport { createSelector } from \"reselect\";\nimport memoize from \"lodash/memoize\";\n\nimport { getLocales, getLocale } from \"../redux/selectors/i18n\";\n\nconst getMessage = createSelector(\n  [getLocales, getLocale],\n  (locales, localeCode) =>\n    memoize(\n      (id: string, defaultMessage?: string, placeholders?: Object) =>\n        locales\n          .getLocale(localeCode)\n          .getMessage(id, defaultMessage, placeholders),\n      (...args) => JSON.stringify(args),\n    ),\n);\n\n/**\n */\nconst useMessage = (\n  id: string,\n  defaultMessage?: string,\n  placeholders?: Object | null,\n): any => useSelector(getMessage)(id, defaultMessage, placeholders);\n\n/**\n */\nconst useTranslate = (): ((...any) => any) => useSelector(getMessage);\n\n/**\n */\nconst useLocale = (): string => useSelector(getLocale);\n\nconst getLocaleCodes = createSelector(\n  (state) => state.i18n.locales,\n  (locales) => locales.map((locale) => locale.code),\n);\n\n/**\n * Retrieve all available locale codes\n */\nconst useLocaleCodes = (): Array<string> => useSelector(getLocaleCodes);\n\nexport { useTranslate, useMessage, useLocale, useLocaleCodes };\n"],"mappings":";;AACA,SAASA,WAAW,QAAQ,aAAa;AACzC,SAASC,cAAc,QAAQ,UAAU;AACzC,OAAOC,OAAO,MAAM,gBAAgB;AAEpC,SAASC,UAAU,EAAEC,SAAS,QAAQ,yBAAyB;AAE/D,MAAMC,UAAU,GAAGJ,cAAc,CAC/B,CAACE,UAAU,EAAEC,SAAS,CAAC,EACvB,CAACE,OAAO,EAAEC,UAAU,KAClBL,OAAO,CACL,CAACM,EAAU,EAAEC,cAAuB,EAAEC,YAAqB,KACzDJ,OAAO,CACJF,SAAS,CAACG,UAAU,CAAC,CACrBF,UAAU,CAACG,EAAE,EAAEC,cAAc,EAAEC,YAAY,CAAC,EACjD;EAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAIC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;IAAJF,IAAI,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;EAAA;EAAA,OAAKC,eAAA,CAAeH,IAAI,CAAC;AAAA,CACnC,CACJ,CAAC;;AAED;AACA;AACA,MAAMI,UAAU,GAAGA,CACjBV,EAAU,EACVC,cAAuB,EACvBC,YAA4B,KACpBV,WAAW,CAACK,UAAU,CAAC,CAACG,EAAE,EAAEC,cAAc,EAAEC,YAAY,CAAC;;AAEnE;AACA;AACA,MAAMS,YAAY,GAAGA,CAAA,KAAyBnB,WAAW,CAACK,UAAU,CAAC;;AAErE;AACA;AACA,MAAMe,SAAS,GAAGA,CAAA,KAAcpB,WAAW,CAACI,SAAS,CAAC;AAEtD,MAAMiB,cAAc,GAAGpB,cAAc,CAClCqB,KAAK,IAAKA,KAAK,CAACC,IAAI,CAACjB,OAAO,EAC5BA,OAAO,IAAKkB,oBAAA,CAAAlB,OAAO,EAAAmB,IAAA,CAAPnB,OAAO,EAAMoB,MAAM,IAAKA,MAAM,CAACC,IAAI,CAClD,CAAC;;AAED;AACA;AACA;AACA,MAAMC,cAAc,GAAGA,CAAA,KAAqB5B,WAAW,CAACqB,cAAc,CAAC;AAEvE,SAASF,YAAY,EAAED,UAAU,EAAEE,SAAS,EAAEQ,cAAc"}

package/lib/hooks/__tests__/useI18n.spec.js.flow

@@ -0,0 +1,30 @@
+import configureMockStore from "redux-mock-store";
+import { Provider } from "react-redux";
+import { renderHook } from "@testing-library/react";
+
+import { Locales } from "../../i18n";
+import { useLocaleCodes } from "../useI18n";
+
+const mockStore = configureMockStore();
+
+describe("i18n hooks", () => {
+  it("useLocaleCodes available", () => {
+    const store = mockStore({
+      i18n: {
+        locale: "en",
+        locales: new Locales([
+          { code: "en", messages: {} },
+          { code: "nl", messages: {} },
+        ]),
+      },
+    });
+
+    const wrapper = ({ children }) => (
+      <Provider store={store}>{children}</Provider>
+    );
+
+    const { result } = renderHook(() => useLocaleCodes(), { wrapper });
+
+    expect(result.current).toStrictEqual(["en", "nl"]);
+  });
+});

package/lib/hooks/useI18n.js

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTranslate = exports.useMessage = exports.useLocale = void 0;
+exports.useTranslate = exports.useMessage = exports.useLocaleCodes = exports.useLocale = void 0;
 var _stringify = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/json/stringify"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _reactRedux = require("react-redux");
 var _reselect = require("reselect");
 var _memoize = _interopRequireDefault(require("lodash/memoize"));
@@ -31,4 +32,11 @@ const useTranslate = () => (0, _reactRedux.useSelector)(getMessage);
 exports.useTranslate = useTranslate;
 const useLocale = () => (0, _reactRedux.useSelector)(_i18n.getLocale);
 exports.useLocale = useLocale;
+const getLocaleCodes = (0, _reselect.createSelector)(state => state.i18n.locales, locales => (0, _map.default)(locales).call(locales, locale => locale.code));
+
+/**
+ * Retrieve all available locale codes
+ */
+const useLocaleCodes = () => (0, _reactRedux.useSelector)(getLocaleCodes);
+exports.useLocaleCodes = useLocaleCodes;
 //# sourceMappingURL=useI18n.js.map

package/lib/hooks/useI18n.js.flow

@@ -33,4 +33,14 @@ const useTranslate = (): ((...any) => any) => useSelector(getMessage);
  */
 const useLocale = (): string => useSelector(getLocale);
 
-export { useTranslate, useMessage, useLocale };
+const getLocaleCodes = createSelector(
+  (state) => state.i18n.locales,
+  (locales) => locales.map((locale) => locale.code),
+);
+
+/**
+ * Retrieve all available locale codes
+ */
+const useLocaleCodes = (): Array<string> => useSelector(getLocaleCodes);
+
+export { useTranslate, useMessage, useLocale, useLocaleCodes };

package/lib/hooks/useI18n.js.map

@@ -1 +1 @@
-{"version":3,"file":"useI18n.js","names":["_reactRedux","require","_reselect","_memoize","_interopRequireDefault","_i18n","getMessage","createSelector","getLocales","getLocale","locales","localeCode","memoize","id","defaultMessage","placeholders","_len","arguments","length","args","Array","_key","_stringify","default","useMessage","useSelector","exports","useTranslate","useLocale"],"sources":["../../src/hooks/useI18n.js"],"sourcesContent":["// @flow\nimport { useSelector } from \"react-redux\";\nimport { createSelector } from \"reselect\";\nimport memoize from \"lodash/memoize\";\n\nimport { getLocales, getLocale } from \"../redux/selectors/i18n\";\n\nconst getMessage = createSelector(\n  [getLocales, getLocale],\n  (locales, localeCode) =>\n    memoize(\n      (id: string, defaultMessage?: string, placeholders?: Object) =>\n        locales\n          .getLocale(localeCode)\n          .getMessage(id, defaultMessage, placeholders),\n      (...args) => JSON.stringify(args),\n    ),\n);\n\n/**\n */\nconst useMessage = (\n  id: string,\n  defaultMessage?: string,\n  placeholders?: Object | null,\n): any => useSelector(getMessage)(id, defaultMessage, placeholders);\n\n/**\n */\nconst useTranslate = (): ((...any) => any) => useSelector(getMessage);\n\n/**\n */\nconst useLocale = (): string => useSelector(getLocale);\n\nexport { useTranslate, useMessage, useLocale };\n"],"mappings":";;;;;;;;AACA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAC,sBAAA,CAAAH,OAAA;AAEA,IAAAI,KAAA,GAAAJ,OAAA;AAEA,MAAMK,UAAU,GAAG,IAAAC,wBAAc,EAC/B,CAACC,gBAAU,EAAEC,eAAS,CAAC,EACvB,CAACC,OAAO,EAAEC,UAAU,KAClB,IAAAC,gBAAO,EACL,CAACC,EAAU,EAAEC,cAAuB,EAAEC,YAAqB,KACzDL,OAAO,CACJD,SAAS,CAACE,UAAU,CAAC,CACrBL,UAAU,CAACO,EAAE,EAAEC,cAAc,EAAEC,YAAY,CAAC,EACjD;EAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAIC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;IAAJF,IAAI,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;EAAA;EAAA,OAAK,IAAAC,UAAA,CAAAC,OAAA,EAAeJ,IAAI,CAAC;AAAA,CACnC,CACJ,CAAC;;AAED;AACA;AACA,MAAMK,UAAU,GAAGA,CACjBX,EAAU,EACVC,cAAuB,EACvBC,YAA4B,KACpB,IAAAU,uBAAW,EAACnB,UAAU,CAAC,CAACO,EAAE,EAAEC,cAAc,EAAEC,YAAY,CAAC;;AAEnE;AACA;AADAW,OAAA,CAAAF,UAAA,GAAAA,UAAA;AAEA,MAAMG,YAAY,GAAGA,CAAA,KAAyB,IAAAF,uBAAW,EAACnB,UAAU,CAAC;;AAErE;AACA;AADAoB,OAAA,CAAAC,YAAA,GAAAA,YAAA;AAEA,MAAMC,SAAS,GAAGA,CAAA,KAAc,IAAAH,uBAAW,EAAChB,eAAS,CAAC;AAACiB,OAAA,CAAAE,SAAA,GAAAA,SAAA"}
+{"version":3,"file":"useI18n.js","names":["_reactRedux","require","_reselect","_memoize","_interopRequireDefault","_i18n","getMessage","createSelector","getLocales","getLocale","locales","localeCode","memoize","id","defaultMessage","placeholders","_len","arguments","length","args","Array","_key","_stringify","default","useMessage","useSelector","exports","useTranslate","useLocale","getLocaleCodes","state","i18n","_map","call","locale","code","useLocaleCodes"],"sources":["../../src/hooks/useI18n.js"],"sourcesContent":["// @flow\nimport { useSelector } from \"react-redux\";\nimport { createSelector } from \"reselect\";\nimport memoize from \"lodash/memoize\";\n\nimport { getLocales, getLocale } from \"../redux/selectors/i18n\";\n\nconst getMessage = createSelector(\n  [getLocales, getLocale],\n  (locales, localeCode) =>\n    memoize(\n      (id: string, defaultMessage?: string, placeholders?: Object) =>\n        locales\n          .getLocale(localeCode)\n          .getMessage(id, defaultMessage, placeholders),\n      (...args) => JSON.stringify(args),\n    ),\n);\n\n/**\n */\nconst useMessage = (\n  id: string,\n  defaultMessage?: string,\n  placeholders?: Object | null,\n): any => useSelector(getMessage)(id, defaultMessage, placeholders);\n\n/**\n */\nconst useTranslate = (): ((...any) => any) => useSelector(getMessage);\n\n/**\n */\nconst useLocale = (): string => useSelector(getLocale);\n\nconst getLocaleCodes = createSelector(\n  (state) => state.i18n.locales,\n  (locales) => locales.map((locale) => locale.code),\n);\n\n/**\n * Retrieve all available locale codes\n */\nconst useLocaleCodes = (): Array<string> => useSelector(getLocaleCodes);\n\nexport { useTranslate, useMessage, useLocale, useLocaleCodes };\n"],"mappings":";;;;;;;;;AACA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAC,sBAAA,CAAAH,OAAA;AAEA,IAAAI,KAAA,GAAAJ,OAAA;AAEA,MAAMK,UAAU,GAAG,IAAAC,wBAAc,EAC/B,CAACC,gBAAU,EAAEC,eAAS,CAAC,EACvB,CAACC,OAAO,EAAEC,UAAU,KAClB,IAAAC,gBAAO,EACL,CAACC,EAAU,EAAEC,cAAuB,EAAEC,YAAqB,KACzDL,OAAO,CACJD,SAAS,CAACE,UAAU,CAAC,CACrBL,UAAU,CAACO,EAAE,EAAEC,cAAc,EAAEC,YAAY,CAAC,EACjD;EAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAIC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;IAAJF,IAAI,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;EAAA;EAAA,OAAK,IAAAC,UAAA,CAAAC,OAAA,EAAeJ,IAAI,CAAC;AAAA,CACnC,CACJ,CAAC;;AAED;AACA;AACA,MAAMK,UAAU,GAAGA,CACjBX,EAAU,EACVC,cAAuB,EACvBC,YAA4B,KACpB,IAAAU,uBAAW,EAACnB,UAAU,CAAC,CAACO,EAAE,EAAEC,cAAc,EAAEC,YAAY,CAAC;;AAEnE;AACA;AADAW,OAAA,CAAAF,UAAA,GAAAA,UAAA;AAEA,MAAMG,YAAY,GAAGA,CAAA,KAAyB,IAAAF,uBAAW,EAACnB,UAAU,CAAC;;AAErE;AACA;AADAoB,OAAA,CAAAC,YAAA,GAAAA,YAAA;AAEA,MAAMC,SAAS,GAAGA,CAAA,KAAc,IAAAH,uBAAW,EAAChB,eAAS,CAAC;AAACiB,OAAA,CAAAE,SAAA,GAAAA,SAAA;AAEvD,MAAMC,cAAc,GAAG,IAAAtB,wBAAc,EAClCuB,KAAK,IAAKA,KAAK,CAACC,IAAI,CAACrB,OAAO,EAC5BA,OAAO,IAAK,IAAAsB,IAAA,CAAAT,OAAA,EAAAb,OAAO,EAAAuB,IAAA,CAAPvB,OAAO,EAAMwB,MAAM,IAAKA,MAAM,CAACC,IAAI,CAClD,CAAC;;AAED;AACA;AACA;AACA,MAAMC,cAAc,GAAGA,CAAA,KAAqB,IAAAX,uBAAW,EAACI,cAAc,CAAC;AAACH,OAAA,CAAAU,cAAA,GAAAA,cAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beinformed/ui",
-  "version": "1.31.4",
+  "version": "1.32.0",
   "description": "Toolbox for be informed javascript layouts",
   "license": "SEE LICENSE IN LICENSE.md",
   "bugs": "http://support.beinformed.com",
@@ -112,40 +112,40 @@
     "@commitlint/config-conventional": "^17.6.7",
     "@testing-library/react": "^14.0.0",
     "auditjs": "^4.0.41",
-    "babel-jest": "^29.6.1",
+    "babel-jest": "^29.6.2",
     "babel-plugin-styled-components": "^2.1.4",
     "cherry-pick": "^0.5.0",
     "commit-and-tag-version": "^11.2.2",
     "cross-env": "^7.0.3",
     "documentation": "^14.0.2",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-ft-flow": "^2.0.3",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-ft-flow": "^3.0.0",
+    "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-jest": "^27.2.3",
-    "eslint-plugin-jsdoc": "^46.4.4",
-    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-jsdoc": "^46.4.6",
+    "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "^6.12.0",
     "flow-bin": "^0.200.1",
     "flow-copy-source": "^2.0.9",
-    "flow-typed": "^3.8.0",
+    "flow-typed": "^3.9.0",
     "glob": "^10.3.3",
     "history": "^4.0.0",
     "husky": "^8.0.3",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "^29.6.1",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.2",
     "jest-junit": "^16.0.0",
     "jest-sonar-reporter": "^2.0.0",
     "jscodeshift": "^0.15.0",
     "lint-staged": "^13.2.3",
     "polished": "^4.0.0",
-    "prettier": "^3.0.0",
+    "prettier": "^3.0.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-helmet-async": "^1.0.0",
-    "react-redux": "^8.1.1",
+    "react-redux": "^8.1.2",
     "react-router": "^5.0.0",
     "react-test-renderer": "^18.1.0",
     "redux": "^4.2.1",

package/src/hooks/__tests__/useI18n.spec.js

@@ -0,0 +1,30 @@
+import configureMockStore from "redux-mock-store";
+import { Provider } from "react-redux";
+import { renderHook } from "@testing-library/react";
+
+import { Locales } from "../../i18n";
+import { useLocaleCodes } from "../useI18n";
+
+const mockStore = configureMockStore();
+
+describe("i18n hooks", () => {
+  it("useLocaleCodes available", () => {
+    const store = mockStore({
+      i18n: {
+        locale: "en",
+        locales: new Locales([
+          { code: "en", messages: {} },
+          { code: "nl", messages: {} },
+        ]),
+      },
+    });
+
+    const wrapper = ({ children }) => (
+      <Provider store={store}>{children}</Provider>
+    );
+
+    const { result } = renderHook(() => useLocaleCodes(), { wrapper });
+
+    expect(result.current).toStrictEqual(["en", "nl"]);
+  });
+});

package/src/hooks/useI18n.js

@@ -33,4 +33,14 @@ const useTranslate = (): ((...any) => any) => useSelector(getMessage);
  */
 const useLocale = (): string => useSelector(getLocale);
 
-export { useTranslate, useMessage, useLocale };
+const getLocaleCodes = createSelector(
+  (state) => state.i18n.locales,
+  (locales) => locales.map((locale) => locale.code),
+);
+
+/**
+ * Retrieve all available locale codes
+ */
+const useLocaleCodes = (): Array<string> => useSelector(getLocaleCodes);
+
+export { useTranslate, useMessage, useLocale, useLocaleCodes };