cl-component-translate - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

 {
   "name": "cl-component-translate",
   "description": "Components for translating text, numbers, dates and times",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "author": "CrowdLab <[e-mail]>",
@@ -28,3 +28,6 @@ "license": "UNLICENSED",
     ]
+  },
+  "devDependencies": {
+    "json-loader": "^0.5.4"
   }
 }

README.md

@@ -5,3 +5,3 @@ # cl-component-translate
 
-Components for translating text, numbers, dates and times
+Components for translating text, numbers, dates and times.
 
@@ -13,1 +13,110 @@ ## Installation
 ```
+
+## Components
+
+### Translation Provider
+
+Wraps the tree to provide the context for translations, wrapper for react-intl's IntlProvider
+
+*Usage:*
+```js
+import { TranslationProvider } from 'crowdlab-react-translations';
+
+const locale = {
+  tag: 'en',
+  language: 'en-GB',
+  translations: {
+    test: 'translated'
+  }
+};
+
+<TranslationProvider locale={locale} >
+  <div>Children</div>
+</TranslationProvider>
+```
+
+### Translate
+
+Wrapper for react-intl's FormattedMessage, does the nuts and bolts of the translating.
+
+*Usage:*
+```js
+import { Translate } from 'crowdlab-react-translations';
+
+<Translate id="key.to.translate" />
+```
+
+### Number
+
+Wrapper for react-intl's FormattedNumber
+
+*Usage:*
+```js
+import { Number } from 'crowdlab-react-translations';
+
+<Number number="5" style="percent" />
+```
+
+### Relative Date
+
+Relative data formatting, ie. 5 minutes ago, In 4 years time etc.
+
+*Usage:*
+```js
+import { RelativeDate } from 'crowdlab-react-translations';
+
+<RelativeDate date="1989-10-28T18:08:40+00:00" />
+```
+
+### Timestamp
+
+Timestamp date time formatting. ie: October 28, 1989, 4:25 PM
+
+*Usage:*
+```js
+import { Timestamp } from 'crowdlab-react-translations';
+
+<Timestamp date="1989-10-28T18:08:40+00:00" />
+```
+
+### injectTranslationHelpers
+
+Wrapper for react-intl's injectIntl, provides a translate() method to wrapper component
+The translate() method works much the same as the Translate component
+
+*Usage:*
+```js
+import { injectTranslationHelpers } from 'crowdlab-react-translations';
+
+const Component = (translate) => {
+  const translatedThing = translate({ id: 'test.key' });
+
+  return <div data-t={translatedThing} />;
+}
+
+export default injectTranslationHelpers()(Component);
+```
+
+## Helper methods
+
+### injectTranslations
+
+This is used for testing react components that need access to Translate.
+Because translate needs context to offer translations.
+This uses the default translations but you can pass it an additional argument
+with custom translations to test with
+
+*Usage:*
+```js
+import { injectTranslations } from 'crowdlab-react-translations';
+
+test('something is translated', t => {
+  const translations = {
+    test: 'translated text'
+  };
+
+  const wrapper = mount(injectTranslations(<Component />, translations));
+
+  t.is(wrapper.text(), 'translated text')
+})
+```

New alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

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

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

87236

increased by510.13%

Number of lines in readme file

121

increased by908.33%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

1

increased byInfinity%

Number of package files

15

decreased by-21.05%

Lines of code

0

decreased by-100%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes