You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

functions.js 1.5KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. // @flow
  2. import React from 'react';
  3. import { withTranslation } from 'react-i18next';
  4. import i18next from './i18next';
  5. /**
  6. * Changes the main translation bundle.
  7. *
  8. * @param {string} language - The language e.g. 'en', 'fr'.
  9. * @param {string} url - The url of the translation bundle.
  10. * @returns {void}
  11. */
  12. export async function changeLanguageBundle(language: string, url: string) {
  13. const res = await fetch(url);
  14. const bundle = await res.json();
  15. i18next.addResourceBundle(language, 'main', bundle, true, true);
  16. }
  17. /**
  18. * Wraps a specific React Component in order to enable translations in it.
  19. *
  20. * @param {Component} component - The React Component to wrap.
  21. * @returns {Component} The React Component which wraps {@link component} and
  22. * enables translations in it.
  23. */
  24. export function translate(component: any) {
  25. // Use the default list of namespaces.
  26. return withTranslation([ 'main', 'languages', 'countries' ])(component);
  27. }
  28. /**
  29. * Translates a specific key to text containing HTML via a specific translate
  30. * function.
  31. *
  32. * @param {Function} t - The translate function.
  33. * @param {string} key - The key to translate.
  34. * @param {Array<*>} options - The options, if any, to pass to {@link t}.
  35. * @returns {ReactElement} A ReactElement which depicts the translated HTML
  36. * text.
  37. */
  38. export function translateToHTML(t: Function, key: string, options: Object = {}) {
  39. // eslint-disable-next-line react/no-danger
  40. return <span dangerouslySetInnerHTML = {{ __html: t(key, options) }} />;
  41. }