Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-i18nify with all npm packages installed. Try it out:

const React = require('react'); const ReactDOMServer = require('react-dom/server'); require('dayjs/locale/nl'); require('dayjs/locale/en'); let ReactI18nfiy = null; try { ReactI18nfiy = require('react-i18nify'); } catch (e) { ReactI18nfiy = require('../build/index.js'); } const { setTranslations, setLocale, setHandleMissingTranslation, setHandleFailedLocalization, translate, localize, Translate, Localize, I18n } = ReactI18nfiy; setTranslations({ en: { application: { title: 'Awesome app with i18n!', hello: 'Hello, %{name}!', }, date: { long: 'MMMM do, yyyy', }, export: 'Export %{count} items', export_0: 'Nothing to export', export_1: 'Export %{count} item', }, nl: { application: { title: 'Toffe app met i18n!', hello: 'Hallo, %{name}!', }, date: { long: 'd MMMM yyyy', }, export: 'Exporteer %{count} dingen', export_0: 'Niks te exporteren', export_1: 'Exporteer %{count} ding', }, }); setLocale('nl'); console.log(translate('application.title')); console.log(translate('application.hello', { name: 'Aad' })); console.log(translate('export', { count: 0 })); console.log(translate('application', { name: 'Aad' })); console.log(localize(1385856000000, { dateFormat: 'date.long' })); console.log(localize(Math.PI, { maximumFractionDigits: 2 })); console.log(localize('huh', { dateFormat: 'date.long' })); setHandleMissingTranslation((key, replacements, options, err) => `Missing translation: ${key}`); console.log(translate('application.unknown_translation')); setHandleFailedLocalization((value, options, err) => `Failed localization: ${value}`); console.log(localize('huh', { dateFormat: 'date.long' })); function AwesomeComponent() { return ( <React.Fragment> <h1> <Translate value="application.title" /> </h1> <div> <Translate value="application.hello" name="Aad" /> </div> <ul> <li> <Translate value="export" count={1} /> </li> <li> <Translate value="export" count={2} /> </li> </ul> <p> <Localize value="07-2016-04" dateFormat="date.long" parseFormat="dd-yyyy-MM" /> </p> <p> <Localize value="2015-09-03" dateFormat="date.long" /> </p> <p> <Localize value={10 / 3} options={{ style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2, }} /> </p> <p> <Localize value="2015-09-03" dateFormat="distance-to-now" /> </p> <I18n render={() => <input placeholder={translate('application.title')} />} /> </React.Fragment> ); } console.log(ReactDOMServer.renderToString(<AwesomeComponent />));

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-i18nify v6.1.1

Simple i18n translation and localization components and helpers for React.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free