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

react-i18nify

Package Overview
Dependencies
Maintainers
2
Versions
131
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-i18nify - npm Package Compare versions

Comparing version 6.0.0-beta.1 to 6.0.0-beta.2

37

example/example.js

@@ -14,5 +14,3 @@ const React = require('react');

const {
setTranslations, setLocale, setHandleMissingTranslation, setHandleFailedLocalization, translate, localize, Translate, Localize, I18n,
} = ReactI18nfiy;
const { setTranslations, setLocale, setHandleMissingTranslation, setHandleFailedLocalization, translate, localize, Translate, Localize, I18n } = ReactI18nfiy;

@@ -68,19 +66,36 @@ setTranslations({

<React.Fragment>
<h1><Translate value="application.title" /></h1>
<div><Translate value="application.hello" name="Aad" /></div>
<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>
<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="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,
style: 'currency',
currency: 'EUR',
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}}
/>
</p>
<p><Localize value="2015-09-03" dateFormat="distance-to-now" /></p>
<p>
<Localize value="2015-09-03" dateFormat="distance-to-now" />
</p>
<I18n render={() => <input placeholder={translate('application.title')} />} />

@@ -87,0 +102,0 @@ </React.Fragment>

47

package.json
{
"name": "react-i18nify",
"version": "6.0.0-beta.1",
"version": "6.0.0-beta.2",
"description": "Simple i18n translation and localization components and helpers for React.",

@@ -15,3 +15,5 @@ "main": "./cjs/index.js",

"build": "rimraf cjs es && npx browserslist --update-db && NODE_ENV=cjs babel src -d cjs && NODE_ENV=es babel src -d es",
"prepare": "npm run build"
"prepare": "npm run build",
"prettier": "prettier --write --loglevel error \"**/*.+(js|jsx|json|yml|yaml|css|ts|tsx|md|mdx|html)\"",
"prettier:check": "prettier --check \"**/*.+(js|jsx|json|yml|yaml|css|ts|tsx|md|mdx|html)\""
},

@@ -56,22 +58,25 @@ "files": [

"devDependencies": {
"@babel/cli": "^7.19.3",
"@babel/core": "^7.19.3",
"@babel/eslint-parser": "^7.19.1",
"@babel/preset-env": "^7.19.3",
"@babel/preset-react": "^7.18.6",
"@babel/register": "^7.18.9",
"@types/react": "^18.0.21",
"dtslint": "^4.2.1",
"eslint": "^8.25.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.31.10",
"eslint-plugin-react-hooks": "^4.6.0",
"jest": "^29.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rimraf": "^3.0.2",
"typescript": "^4.8.4"
"@babel/cli": "7.19.3",
"@babel/core": "7.19.3",
"@babel/eslint-parser": "7.19.1",
"@babel/preset-env": "7.19.3",
"@babel/preset-react": "7.18.6",
"@babel/register": "7.18.9",
"@types/react": "18.0.21",
"dtslint": "4.2.1",
"eslint": "8.25.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-prettier": "8.5.0",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-react": "7.31.10",
"eslint-plugin-react-hooks": "4.6.0",
"jest": "29.2.0",
"prettier": "2.7.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"rimraf": "3.0.2",
"typescript": "4.8.4"
}
}

43

README.md

@@ -95,18 +95,18 @@ # React I18nify

translate('application.title');
// => Toffe app met i18n!
translate('application.hello', {name: 'Aad'});
// => Hallo, Aad!'
translate('export', {count: 0});
// => Niks te exporteren
// => Toffe app met i18n!
translate('application.hello', { name: 'Aad' });
// => Hallo, Aad!'
translate('export', { count: 0 });
// => Niks te exporteren
translate('application.unknown_translation');
// => unknown_translation
translate('application', {name: 'Aad'});
// => {hello: 'Hallo, Aad!', title: 'Toffe app met i18n!'}
// => unknown_translation
translate('application', { name: 'Aad' });
// => {hello: 'Hallo, Aad!', title: 'Toffe app met i18n!'}
localize(1385856000000, { dateFormat: 'date.long' });
// => 1 december 2013
// => 1 december 2013
localize(Math.PI, { maximumFractionDigits: 2 });
// => 3,14
// => 3,14
localize('huh', { dateFormat: 'date.long' });
// => null
// => null
```

@@ -119,3 +119,3 @@

<I18n render={() => <input placeholder={translate("application.title")} />} />
<I18n render={() => <input placeholder={translate('application.title')} />} />;
```

@@ -139,7 +139,7 @@

* `value` (string)
- `value` (string)
The translation key to translate.
* Other props
- Other props

@@ -152,7 +152,7 @@ All other provided props will be used as replacements for the translation.

* `value` (number|string|object)
- `value` (number|string|object)
The number or date to localize.
* `dateFormat` (string)
- `dateFormat` (string)

@@ -162,3 +162,3 @@ The translation key for providing the format string. Only needed for localizing dates.

* `parseFormat` (string)
- `parseFormat` (string)

@@ -168,3 +168,3 @@ An optional formatting string for parsing the value when localizing dates.

* `options` (object)
- `options` (object)

@@ -178,3 +178,3 @@ When localizing numbers, the localize component supports all options as provided by the Javascript built-in `Intl.NumberFormat` object.

* `render` (func)
- `render` (func)

@@ -240,6 +240,5 @@ The return value of the provide function will be rendered and automatically re-render when the locale or translations change.

translate('application.unknown_translation');
// => Missing translation: application.unknown_translation
// => Missing translation: application.unknown_translation
```
### `setHandleFailedLocalization(fn)`

@@ -257,3 +256,3 @@

localize('huh', { dateFormat: 'date.long' });
// => Failed localization: huh
// => Failed localization: huh
```

@@ -260,0 +259,0 @@

9

src/components/Localize.jsx

@@ -7,5 +7,3 @@ import PropTypes from 'prop-types';

render() {
const {
value, dateFormat, parseFormat, options = {},
} = this.props;
const { value, dateFormat, parseFormat, options = {} } = this.props;
const localization = localize(value, { ...options, dateFormat, parseFormat });

@@ -18,6 +16,3 @@

Localize.propTypes = {
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.object]).isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
dateFormat: PropTypes.string,

@@ -24,0 +19,0 @@ parseFormat: PropTypes.string,

11

src/index.js

@@ -5,12 +5,3 @@ export { forceComponentsUpdate } from './components/Base';

export { default as I18n } from './components/I18n';
export {
getLocale,
setLocale,
setLocaleGetter,
getTranslations,
setTranslations,
setTranslationsGetter,
setHandleMissingTranslation,
setHandleFailedLocalization,
} from './lib/settings';
export { getLocale, setLocale, setLocaleGetter, getTranslations, setTranslations, setTranslationsGetter, setHandleMissingTranslation, setHandleFailedLocalization } from './lib/settings';
export { default as translate } from './lib/translate';

@@ -17,0 +8,0 @@ export { default as t } from './lib/translate';

12

src/lib/localize.js

@@ -23,9 +23,3 @@ import dayjs from 'dayjs';

const parsedDate = options.parseFormat
? dayjs(
value,
translate(options.parseFormat, {}, { locale, returnKeyOnError: true }),
locale,
)
: dayjs(value);
const parsedDate = options.parseFormat ? dayjs(value, translate(options.parseFormat, {}, { locale, returnKeyOnError: true }), locale) : dayjs(value);

@@ -37,5 +31,3 @@ if (!parsedDate.isValid()) throw new Error('Invalid date');

}
return parsedDate.format(
translate(options.dateFormat, {}, { locale, returnKeyOnError: true }),
);
return parsedDate.format(translate(options.dateFormat, {}, { locale, returnKeyOnError: true }));
} catch (err) {

@@ -42,0 +34,0 @@ return handleFailedLocalization(value, options, err);

3

src/lib/settings.js

@@ -27,4 +27,3 @@ /* eslint no-console: "off" */

export const getTranslations = () => (settings.getTranslations
? settings.getTranslations() : settings.translationsObject);
export const getTranslations = () => (settings.getTranslations ? settings.getTranslations() : settings.translationsObject);

@@ -31,0 +30,0 @@ export const setTranslations = (translations, rerenderComponents = true) => {

4

src/lib/translate.js

@@ -8,5 +8,3 @@ import { fetchTranslation, replace } from './utils';

try {
const translationLocale = getTranslations()[locale]
? locale
: locale.split('-')[0];
const translationLocale = getTranslations()[locale] ? locale : locale.split('-')[0];
translation = fetchTranslation(getTranslations(), `${translationLocale}.${key}`, replacements.count);

@@ -13,0 +11,0 @@ } catch (err) {

6

src/lib/utils.js

@@ -30,7 +30,3 @@ import React from 'react';

if (_index > -1) {
return fetchTranslation(
translations[key.substring(0, _index)],
key.substr(_index + 1),
count,
);
return fetchTranslation(translations[key.substring(0, _index)], key.substr(_index + 1), count);
}

@@ -37,0 +33,0 @@ if (count !== null) {

47

types/index.d.ts
// TypeScript Version: 3.7
import React = require("react");
import React = require('react');
export class I18n extends React.Component { }
export class I18n extends React.Component {}

@@ -18,14 +18,5 @@ // Localization

export type LocalizeNumberOptions = Intl.NumberFormatOptions;
export function localize(
value: string | number,
options?: LocalizeDateOptions
): string;
export function localize(
value: number,
options?: LocalizeNumberOptions
): string;
export function l(
value: string | number,
options?: LocalizeDateOptions
): string;
export function localize(value: string | number, options?: LocalizeDateOptions): string;
export function localize(value: number, options?: LocalizeNumberOptions): string;
export function l(value: string | number, options?: LocalizeDateOptions): string;
export function l(value: number, options?: LocalizeNumberOptions): string;

@@ -39,5 +30,3 @@

} & LocalizeNumberOptions;
export class Localize extends React.Component<
LocalizeDateProps | LocalizeNumberProps
> { }
export class Localize extends React.Component<LocalizeDateProps | LocalizeNumberProps> {}

@@ -52,12 +41,6 @@ // Translations

export function getTranslations(): Translations | undefined;
export function setTranslations(
transations: Translations,
rerenderComponents?: boolean
): void;
export function setTranslations(transations: Translations, rerenderComponents?: boolean): void;
export function setTranslationsGetter(fn: TranslationsGetter): void;
export type ReplacementsGetter = (
key: string,
replacements: Replacements
) => string;
export type ReplacementsGetter = (key: string, replacements: Replacements) => string;
export function setHandleMissingTranslation(fn: ReplacementsGetter): void;

@@ -71,12 +54,4 @@

export function translate(
key: string,
replacements?: Replacements,
options?: TranslateOptions
): string;
export function t(
key: string,
replacements?: Replacements,
options?: TranslateOptions
): string;
export function translate(key: string, replacements?: Replacements, options?: TranslateOptions): string;
export function t(key: string, replacements?: Replacements, options?: TranslateOptions): string;

@@ -86,5 +61,5 @@ export type TranslateProps = {

} & Replacements;
export class Translate extends React.Component<TranslateProps> { }
export class Translate extends React.Component<TranslateProps> {}
// Utility
export function forceComponentsUpdate(): void;
SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc