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

@artemisag/i18n-js-plus

v1.0.0

Published

This set of tools uses the `i18n-js` library and expands it to support react components and other features.

Downloads

312

Readme

Expanded Translation Tools for I18N-js

This set of tools uses the i18n-js library and expands it to support react components and other features.

It's main offerings are the translate function and the Translate react component. Both offer access to translation strings with multiple lookups, pluralization and interpolation.

translate(scope, { lookup, fallback, pluralFor, values  } )
<Translate scope lookup fallback pluralFor values  />

SIMPLE TRANSLATIONS

A scope string references a specific value in the translation files managed by i18n-js for the current locale.

This string is a dot-separated list of names such as example.messages.label or errors.access.not_allowed that is used to search in the locale data managed by a rails application as YAML files inside config/locale.

PLURALIZATION

If scope matches a set of translations instead of a single string, keyed with one, other and zero, then the value of pluralFor is used to select the appropriate variation to pluralize that particular number.

The default value for pluralFor is 1 to make it easier to expand our translation trees. This comes handy when we start with a simple scope such as example.units.boards, matched with a translation value of example.units.boards = 'Board'. If/when we decide we need another subscope, such as example.units.boards.withQuantity, we can update the translation values so that example.units.boards becomes example.units.boards.one without having to change existing code that uses example.units.boards as a scope. Otherwise, adding subkeys to translation values at example.units.boards would cause errors.

INTERPOLATION

The translation string matched by scope can include interpolation placeholders using ${name} or {{name}}, which get replaced with the value for the given name included in values.

LOOKUP

The given scope can include placeholders using [name] --the scope, not the resulting translation string-- which get replaced with values for the given name included in lookup. Values are also retrieved from the "global translation lookups" described below.

These values are "normalized" to use only underscores and lowercase alphanumeric characters.

If name corresponds to an array instead of a single value, then the scope will be used to search under those possible values.

This means for example: a scope of "example.[type].[level].label" with lookup = {type: 'Name', level: ['Specific', 'Generic']} will search for translation strings under example.name.specific.label first, and if not found, under example.name.generic.label.

If a scope has multiple parts that map into arrays, all combinations will be searched.

If no matching string is found, then the optional fallback will be used instead.

LOCALE AND LOOKUP GLOBAL CONTEXT

The library provides a setLocale method to set the current locale (an identifier for language and regional variations such as "en-US" for American English or "es" for Spanish). There is also a getLocale if you need to retrieve the current locale.

You can also define "global translation lookup values" with addGlobalTranslationLookup(key, value) and can be reset with resetGlobalTranslationLookups().

These values are used along with explicit lookup values for all calls to translate.

CREDITS

This library was originally developed at Artemis by Sebastián Delmont.