A wrapper around react-intl made for ease of use.

Usage no npm install needed!

<script type="module">
  import reactIntlWrapper from '';


‼️ NOTE: still under construction ‼️

react-intl convenience wrapper

📯 Description

This helps set up some convenient tools when using react-intl.

  • adds short F tag for translation
  • automatically generates a message id based on the content/description
  • provides internal locales for testing (àçčëńtėd, and looooooong)
  • provides fallback property to give untranslated strings something decent to show
  • provides extraction tool based on the automatic message id

💾 Setup


  "presets": ["react-app"],
  "plugins": [

For extraction, install extract-react-intl-messages and add to your package.json

"scripts": {
  "extract-messages": "NODE_ENV=development extract-messages -l=en -o build/messages --flat --moduleSourceName react-intl-wrapper --additionalComponentNames F '**/!(*.test).js'"


import { IntlProvider, isInternalLocale, setLocales } from 'react-intl-wrapper';

  defaultLocale: configuration.defaultLocale,
  locales: configuration.locales,

async function renderAppTree(app) {
  let translations = {};
  // This is to dynamically load language packs as needed. We don't need them all client-side.
  if (
    configuration.locale !== configuration.defaultLocale &&
  ) {
    translations = (
      await import(`../../shared/i18n-lang-packs/${configuration.locale}`)

  return (

async function render() {
  const appTree = await renderAppTree(<App />);
  ReactDOM.hydrate(appTree, document.getElementById('root'));

Example language pack, fr.js

const translations = {
  test: 'le test',
    'Modifier {code} et enregistrer pour recharger.',

export default translations;

Example i18n code

import { defineMessages, F, useIntl } from 'react-intl-wrapper';

// For things like "alt" text and other strings not in JSX.
const messages = defineMessages({
  greeting: { msg: 'logo' },
  fallback: { msg: 'logo2' },

// JSX
  msg="i18n pluralization test: {itemCount, plural, =0 {no items} one {# item} other {# items}}."
    itemCount: 5000,

  msg="i18n html test: <a>visit our website</a> and <cta>see the world</cta>"
    a: msg => (
      <a className="external-link" target="_blank" rel="noopener noreferrer" href="">
    cta: msg => <strong>{msg}</strong>,

📜 License


(The format is based on Make a README)