1.0.0 • Public • Published


    Visualization of i18n-strings, inspired by railslove/i18n_viz.

    ...or view the Demo.

    In developoment.

    This Library provides a Higher-Order Component to wrap around i18n Components. If you hover over such a Component, a Tooltip will be visible with the id and description of the i18n String. This is very useful if you want to check in your Browser which String belongs to which id.

    It also includes support for popular i18n Libraries:

    Those Components are simply the Components of their Libraries, wrapped with the HOC.

    It has nearly no impact on the size of your bundle in Production (or other environments, where the visualization should not be visible). If it isn't used, it won't be bundled.


    react-i18n-viz is turned off by default. This prevents that the tooltips are visible in environments, which you don't specify. To enable the Tooltips add a special Environment Variable:


    You can find a working App in /example.

    with react-intl

    Instead of importing FormattedMessage and FormattedHTMLMessage from react-intl, import them from react-i18n-viz/lib/react-intl. You can use those components like their react-intl counterparts.

    import React from 'react'
    import { IntlProvider } from 'react-intl'
    import { FormattedMessage } from 'react-i18n-viz/lib/react-intl'
    export default class MyComponent extends React.Component {
      render() {
        return (
          <IntlProvider locale="en" messages={/* ... */}>
                description="A friendly greeting."
                values={{ name: 'John' }}

    with react-i18next

    Instead of importing Trans from react-i18next, import it from react-i18n-viz/lib/react-i18next. You can use it like the Trans-Component from react-i18next.

    To show a description in the i18n-viz Tolltip, you can provide the description prop.

    import React from 'react'
    import { I18nextProvider } from 'react-i18next'
    import { Trans } from 'react-i18n-viz/lib/react-i18next'
    export default class MyComponent extends React.Component {
      render() {
        return (
          <I18nextProvider i18n={i18n}>
              <Trans i18nKey="app_greeting" description="A friendly greeting.">
                Hello {{ name }}, how are you today

    as Higher-Order Component


    import { withI18nViz } from 'react-i18n-viz'
    class MyCustomI18nComponent {
      static propTypes = {
        myI18nId: PropTypes.string,
        myI18nDescription: PropTypes.string
      // ...
    const mapVizProps = props => ({
      id: props.myI18nId, // required
      description: props.myI18nDescription // optional
    export default withI18nViz(mapVizProps)(MyCustomI18nComponent)


    Enhances a React Component with the i18n visualization.

    • mapVizProps (Function). Defines which of your props are used as i18n id and as i18n description. Needs to return an object with { id, description }.


    1. Clone repo
    2. npm install
    3. npm link && cd example && npm link react-i18n-viz
    4. Run npm start to bundle the library in dev mode
    5. Run cd example && npm start in a separate shell to start the example app


    MIT © 2018 - present, Railslove GmbH.

    Made for you with 💚 by Railslove.


    npm i react-i18n-viz

    DownloadsWeekly Downloads






    Unpacked Size

    23.9 kB

    Total Files


    Last publish


    • timomeh
    • chrispop
    • danieldiekmeier