Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-i18n-viz

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-i18n-viz

Visualization of i18n-strings for react

  • 1.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2
increased by100%
Maintainers
1
Weekly downloads
 
Created
Source

react-i18n-viz

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.

Usage

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:

REACT_APP_SHOW_I18N_VIZ=true

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={/* ... */}>
        <div>
          <FormattedMessage
            id="app.greeting"
            description="A friendly greeting."
            values={{ name: 'John' }}
          />
        </div>
      </IntlProvider>
    )
  }
}

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}>
        <div>
          <Trans i18nKey="app_greeting" description="A friendly greeting.">
            Hello {{ name }}, how are you today
          </Trans>
        </div>
      </I18nextProvider>
    )
  }
}

as Higher-Order Component

Example

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)
withI18nViz(mapVizProps)

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 }.

Contribute

  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

License

MIT © 2018 - present, Railslove GmbH.

Made for you with 💚 by Railslove.

Keywords

FAQs

Package last updated on 10 Apr 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc