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-translations

v1.0.0

Published

modern gettext-style translations for React

Downloads

98

Readme

react-translations

Modern translations for React. Lightweight and isomorphic app friendly.

npm version CircleCI codecov David

Translation Format

This library uses gettext as the translation style, and thus relies on PO file format for storing translations. Gettext has been battle tested, and the PO format is very familiar to translators. The system is simple to use and allows the developer to continue building out UIs in the English language, with an almost complete isolation to the rest of the internationalization process. Read more information here.

Example

A complete example client (React) and server (Express.JS) setup, with build chain (Webpack & Gulp), is available at react-translations-demo!

Usage

Component Verbose Style

import { Message } from 'react-translations'

Singular form

<Message id="Hello World!" />

Singular form with context

<Message id="Flag" context="Physical object" />

Plural form

<Message
  id="You have one cat!"
  idPlural="You have {numCats} cats!"
  count={1}
  numCats="1" />

Plural form with context and translator comment

<Message
  id="You have {numCats} car!"
  idPlural="You have {numCats} cars!"
  numCats="1,000"
  count={1000}
  context="Homepage"
  comment="Here's a comment for the translator" />

Component Shortform Style

import { _, _n, _c, _nc, Message } from 'react-translations'
<Message i18n={_('You have one cat!, You have many cats!', 1)} />
...

Vanilla JS

import { _, _n, _c, _nc } from 'react-translations'

const someString = _('Hello World!')(locale)

Setup

Set the available translations on the client (and server if you perform SSR):

import { setMessages } from 'react-translations'
setMessages({ ... })

You want to set this before you perform any rendering. On the client this may be start of a webpack entry. On the server, during boot. The shape of this object is specific to Jed, which is what is used to do the gettext mapping. You can use tools to generate this format automatically (see FAQ).

Wrap your root React component with the provider:

import { LocaleProvider } from 'react-translations'
return <LocaleProvider locale={locale}><App/></LocaleProvider>

The user's locale (combination of language and region) must be provided and will be used to determine the translations based on one of the keys in the object passed to setMessages earlier. How you detect a user's locale is completely up to you.

Placeholders

Placeholders like numCats above can be standard JS types or React elements.

Note that count can be used to determine plurality, and function as a placeholder. So if you don't care about additonal formatting of numbers, the above example could be simplified to:

<Message id="You have one cat!" idPlural="You have {count} cars!" count={1000} />

FAQ

  1. What can I use to extract strings from these components for translation?

You can use the babel plugin babel-extract-gettext to do an export into a PO file format that translators are familiar with.

  1. How can I convert a PO file back into JSON to be used for this library?

You can use po2json to do the conversion.

  1. When/where should the above things run?

It depends on your build chain. If you are friendly with gulp, it can be used easily with gulp-po2json to do imports. Exports can be achieved with gulp-babel and the previously named babel plugin.

  1. Where can I see an example of how to support server rendering, build chain, <insert X>?

Check out react-translations-demo!

Acknowledgements

Thanks to the author of Jed. Not only for the library itself, but also for inspiration to continue driving internalization and translations forward in the JS community.