npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-ghost-i18n

v1.0.4

Published

Augment existing react components with non-intrusive internationalization.

Downloads

19

Readme

react-ghost-i18n

Ghost I18n is a ReactJs component to augment existing react components with non-intrusive internationalization.

Installation

If you are using react directly in the browser, you can download react-ghost-i18n-browser.min.js and include it in you page:

<script src="https://fb.me/react-0.14.7.js"></script>
<script src="https://fb.me/react-dom-0.14.7.js"></script>
<script src="react-ghost-i18n-browser.min.js"></script>

Otherwise, just use npm:

npm install --save react-ghost-i18n

and then, in your scripts:

import I18n from 'react-ghost-i18n';

Usage

To use the I18n component, just add react-ghost-i18n-browser.min.js (or import I18n from 'react-ghost-i18n') before any other component in your compilation pipeline and check the console for missing translation warnings.

Motivation

So you've been writing this React component for a couple of days now. And even though you try your best to ignore it, you cannot shake the feeling that every string you hardcode in your component brings you a little bit closer to the Dark Side.

So fearing that if you keep down this road you'll become full Sith, you google for react internationalization alternatives like crazy.

Unfortunately, even though there are many very good and extremely powerful options out there (e.g. formatjs), they require quite a lot of changes to the code and bureaucracy comparable only with an intergalactic government.

Clearly you don't want to (or cannot) change all your components right now. And even if you could, the final product would be riddled with strange tags like <FormattedMessage /> making it harder to maintain.

Wouldn't it be great if you could gain all the internationalization benefits without sacrificing your Jedi nimbleness?

The aim of this project is to non-intrusively add internationalization to existing components with very little or no changes to the existing code.

In other words, the idea is that by using <I18n> you can keep happily hardcoding your messages and worry about translations later. In some cases you could even translate somebody else's components (e.g. third-party libraries) without changing their code.

Usage revisited

By default <I18n> will monkypatch React.createClass to wrap your components in an <I18n>. The <I18n> component in turn will recursively translate all the texts of its children components. This means that just by including react-ghost-i18n-browser.min.js before any other component in the app, you'll gain full localization with minimal effort.

Alternatively, you could opt-out of this implicit translation behavior on a per-component basis by adding the no18n flag:

var MyComponent = React.createClass({
  noI18n: true,
  ...
});

Or, if you prefer, you could opt-out globally, by calling I18n.optOut() before any call to React.createClass:

I18n.optOut();
var MyComponent = React.createClass({
  ...
});

Note that if you opt-out of the implicit behavior but you still want translations, you'll have to manually wrap your components in a <I18n> (plenty of examples in test.jsx).

Configuration

The configuration settings are:

  • locale: must be an object with texts as keys and translations as values. This can also be a function that takes a string and returns the translation.
  • prefix: a string that will be prepended to the text before searching for a translation.
  • warn: the function that will be used to emit warnings (e.g. missing translation).

You can configure <I18n> by setting properties in the global I18n object (useful for implicit behavior):

I18n.locale = { 'Hello, World!': 'Hola, Mundo!' }

Or by passing props to an <I18n> instance:

<I18n i18n={ locale: { 'Hello, World!': 'Hola, Mundo!' } }>Hello, World!</I18n>

Or directly:

<I18n locale={ 'Hello, World!': 'Hola, Mundo!' }>Hello, World!</I18n>

If both are supplied, instance props get priority (in the order listed above).

Examples

Assuming the following translations:

I18n.locale = {
  'Hello, World!': 'Hola, Mundo!',
  'This text is {0}!': 'Este texto está en {0}!',
  'bold': 'negrita',
  'Write some text here': 'Escribí un texto acá',
  'Hover over me': 'Mové el mouse sobre mi',
  'Great!': 'Genial!',
  'I\'m a button input': 'Soy un input botón',
  'I\'m a submit input': 'Soy un input submit',
  '{0}/{1}/{2}': '{1}/{0}/{2}'
};

Some translation examples are:

| JSX | Renders to | |----- |------------| | Hello, World! (implicit) | <span>Hola, Mundo!</span> | | <I18n>Hello, World!</I18n> | <span>Hola, Mundo!</span> | | <I18n>This text is <b>bold</b>!</I18n> | <span>Este texto está en <b>negrita</b>!</span> | | <I18n><input placeholder="Write some text here" /></I18n> | <span><input placeholder="Escribí un texto acá" /></span> | | <I18n><span title="Great!">Hover over me</span></I18n> | <span><span title="Genial!">Mové el mouse sobre mi</span></span> | | <I18n><input type="button" value="I'm a button input" /></I18n> | <span><input type="button" value="Soy un input botón" /></span> | | <I18n><input type="submit" value="I'm a submit input" /></I18n> | <span><input type="button" value="Soy un input submit" /></span> |

See test.jsx for more examples.

Stateless function components

If you are using purely functional components (i.e. "stateless function components"), the implicit behavior won't work and you'll have to manually wrap your functional component with either a non-functional component (i.e. React.createClass) or I18n.wrap.

Examples follow:

// Given:
var Stateless = ({children}) => <b>{children}</b>;

// You can just explicitly wrap it in <I18n>:
var translated1 = <I18n>
  <Stateless>Hi!</Stateless>
</I18n>;

// Or, if you opted-in to the implicit behavior (default) you can wrap it in
// any other non-functional component:
var MyComponent = React.createClass({
  ...
});
var translated2 = <MyComponent>
  <Stateless>Hi!</Stateless>
</MyComponent>;

// Or you could just wrap the functional component itself:
var WrappedStateless = I18n.wrap(({children}) => <b>{children}</b>);
var translated3 = <WrappedStateless>Hi!</WrappedStateless>;

Demo

Click here.