react-polyglot-hooks - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

CHANGELOG.md

@@ -5,2 +5,10 @@ # Changelog
 
+### [0.1.1](https://github.com/pmmmwh/react-polyglot-hooks/compare/v0.1.0...v0.1.1) (2019-08-26)
+
+### Bug Fixes
+
+- **deps-dev:** fix lock file mismatch ([80da34d](https://github.com/pmmmwh/react-polyglot-hooks/commit/80da34d))
+- **polyglot:** make key in NoOp required ([37d68d3](https://github.com/pmmmwh/react-polyglot-hooks/commit/37d68d3))
+- **publish:** properly distribute with the dist folder ([0b58f6f](https://github.com/pmmmwh/react-polyglot-hooks/commit/0b58f6f))
+
 ## 0.1.0 (2019-08-26)
@@ -7,0 +15,0 @@

dist/i18nContext.d.ts

 /// <reference types="react" />
 import Polyglot from 'node-polyglot';
-declare const NoOp: (key?: string | undefined) => string | undefined;
+declare const NoOp: (key: string) => string;
 export interface I18nContextProps {
@@ -5,0 +5,0 @@ locale?: string;

dist/useTranslate.d.ts

 /// <reference path="../src/vendors.d.ts" />
 /// <reference types="node-polyglot" />
-declare const useTranslate: () => ((key?: string | undefined) => string | undefined) | ((phrase: string, options?: number | import("node-polyglot").InterpolationOptions | undefined) => string);
+declare const useTranslate: () => ((key: string) => string) | ((phrase: string, options?: number | import("node-polyglot").InterpolationOptions | undefined) => string);
 export default useTranslate;

package.json

 {
   "name": "react-polyglot-hooks",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Hooks for using Polyglot.js with React.",
@@ -20,2 +20,5 @@ "keywords": [
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "license": "MIT",
@@ -35,5 +38,5 @@ "repository": {
     "lint:eslint": "eslint --report-unused-disable-directives **/*.{js,ts,tsx}",
-    "lint:prettier": "prettier --check **/*.{js,ts,tsx,json,md,yml,yaml}",
+    "lint:prettier": "prettier --check **/*.{js,ts,tsx,json,md,yml}",
     "lint:eslint:fix": "eslint --fix --report-unused-disable-directives **/*.{js,ts,tsx}",
-    "lint:prettier:fix": "prettier --write **/*.{js,ts,tsx,json,md,yml,yaml}",
+    "lint:prettier:fix": "prettier --write **/*.{js,ts,tsx,json,md,yml}",
     "prebuild": "rimraf dist",
@@ -65,4 +68,5 @@ "release": "standard-version",
     "@typescript-eslint/parser": "^1.13.0",
-    "babel-eslint": "10.0.2",
+    "babel-eslint": "^10.0.3",
     "babel-jest": "^24.8.0",
+    "codecov": "^3.5.0",
     "eslint": "^6.1.0",
@@ -69,0 +73,0 @@ "eslint-config-react-app": "^5.0.1",

README.md

 # React Polyglot Hooks
 
-Hooks for using Polyglot.js with React.
+Hooks for using [Polyglot.js](https://airbnb.io/polyglot.js) with [React](https://reactjs.org/).
+
+[![npm Package](https://img.shields.io/npm/v/react-polyglot-hooks/latest.svg)](https://www.npmjs.com/package/react-polyglot-hooks)
+[![CircleCI](https://img.shields.io/circleci/project/github/pmmmwh/react-polyglot-hooks/master.svg)](https://circleci.com/gh/pmmmwh/react-polyglot-hooks/tree/master)
+[![Coverage Status](https://img.shields.io/codecov/c/github/pmmmwh/react-polyglot-hooks/master.svg)](https://codecov.io/gh/pmmmwh/react-polyglot-hooks/branch/master)
+![Code Style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?logo=prettier)
+[![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=pmmmwh/react-polyglot-hooks)](https://dependabot.com)
+[![Dependencies](https://david-dm.org/pmmmwh/react-polyglot-hooks/master/status.svg)](https://david-dm.org/pmmmwh/react-polyglot-hooks/master)
+[![PeerDependencies](https://david-dm.org/pmmmwh/react-polyglot-hooks/master/peer-status.svg)](https://david-dm.org/pmmmwh/react-polyglot-hooks/master?type=peer)
+[![DevDependencies](https://david-dm.org/pmmmwh/react-polyglot-hooks/master/dev-status.svg)](https://david-dm.org/pmmmwh/react-polyglot-hooks/master?type=dev)
+
+## Installation
+
+React Polyglot Hooks is available as an [npm package](https://www.npmjs.com/package/react-polyglot-hooks).
+
+```sh
+// with npm
+npm install react-polyglot-hooks
+
+// with yarn
+yarn add react-polyglot-hooks
+```
+
+> React is required as a peer dependency.
+> Please install version 16.8.0 or later (minimum requirement for hooks).
+
+## Usage
+
+React Polyglot Hooks offers 1 wrapper component: `<I18n>` and 2 hooks: `useLocale` and `useTranslate`.
+The hooks have to be wrapped with the `<I18n>` component to work properly.
+
+Here is a quick example to get you started:
+First, wrap a parent component with `<I18n>` and provide `locale` and `phrases`.
+
+`Parent.jsx`
+
+```jsx
+import React from 'react';
+import { I18n } from 'react-polyglot-hooks';
+import Child from './Child';
+
+// ... or any ways to determine current locale
+const locale = window.locale || 'en';
+
+// You can put translations in separate files
+const phrases = {
+  en: { hello: 'Hello, World!' },
+  fr: { hello: 'Bonjour, Monde!' },
+};
+
+export default function Parent() {
+  return (
+    <I18n locale={locale} phrases={phrases[locale]}>
+      <Child />
+    </I18n>
+  );
+}
+```
+
+Then, in a child component, call the hooks:
+
+`Child.jsx`
+
+```jsx
+import React from 'react';
+import { useLocale, useTranslate } from 'react-polyglot-hooks';
+
+export default function Child() {
+  const locale = useLocale(); // Current locale: "en"
+  const t = useTranslate(); // Translate function, takes a phrase key
+
+  return (
+    <React.Fragment>
+      <span>{locale}</span>
+      <span>{t('hello')}</span>
+    </React.Fragment>
+  );
+}
+```
+
+That's it!
+
+### Usage with TypeScript
+
+Types are baked in as the project is written in [TypeScript](https://www.typescriptlang.org/).
+
+## API
+
+### `<I18n>`
+
+Provides i18n context to the hooks. Accepts all options supported by [Polyglot.js](https://airbnb.io/polyglot.js).
+
+#### Props
+
+| Prop            | Type                                                                     | Required | Description                                                                       |
+| --------------- | ------------------------------------------------------------------------ | -------- | --------------------------------------------------------------------------------- |
+| `children`      | `Node`                                                                   | ✅       | Any node(s) accepted by React.                                                    |
+| `locale`        | `string`                                                                 | ✅       | Current locale, used for pluralization.                                           |
+| `phrases`       | `{ [key: string]: string }`                                              | ✅       | Key-value pair of translated phrases, can be nested.                              |
+| `allowMissing`  | `boolean`                                                                | ❌       | Controls whether missing keys in a `t` call is allowed.                           |
+| `onMissingKey`  | `(key: string, options: InterpolationOptions, locale: string) => string` | ❌       | A function called when `allowMissing` is `true` and a missing key is encountered. |
+| `interpolation` | `{ prefix: string, suffix: string }`                                     | ❌       | Controls the prefix and suffix for an interpolation.                              |
+
+### `useLocale`
+
+Returns the current active locale (`string`).
+
+### `useTranslate`
+
+Returns a special function (`t`) which takes in parameters and returns a phrase.
+
+#### `t(phrase, InterpolationOptions)`
+
+| Param                  | Type                                    | Required | Description                                                                                                |
+| ---------------------- | --------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------- |
+| `phrase`               | `string`                                | ✅       | Key of the needed phrase.                                                                                  |
+| `InterpolationOptions` | `number` or `{ [key: string]: string }` | ❌       | A number to be interpolated with `smart_count`, or a key-value pair to interpolate values into the phrase. |
+
+For more details, please visit the [documentation](https://airbnb.io/polyglot.js) of Polyglot.js.
+
+## Changelog
+
+The changelog is available [here](/CHANGELOG.md).
+
+## License
+
+This project is licensed under the terms of the
+[MIT License](/LICENSE).
+
+## Acknowledgements
+
+This project is a wrapper to ease the use of [Polyglot.js](https://airbnb.io/polyglot.js) within [React](https://reactjs.org/), and is highly influenced by [`react-polyglot`](https://github.com/nayaabkhan/react-polyglot).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

135

increased by3275%

Worsened metrics

Total package byte prevSize

16640

decreased by-54.97%

Dev dependency count

40

increased by2.56%

Number of package files

16

decreased by-56.76%

Lines of code

124

decreased by-69.08%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes