@transifex/react - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/index.js

@@ -5,9 +5,61 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 var React__default = _interopDefault(React);
+var native = require('@transifex/native');
 var PropTypes = _interopDefault(require('prop-types'));
-var native = require('@transifex/native');
 
+function useLanguages() {
+  const [languages, setLanguages] = React.useState([]);
+  React.useEffect(() => {
+    const fetch = function () {
+      try {
+        return Promise.resolve(native.tx.getLanguages()).then(function (_tx$getLanguages) {
+          setLanguages(_tx$getLanguages);
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    fetch();
+  }, []);
+  return languages;
+}
+
+function LanguagePicker({
+  sourceLanguage,
+  className
+}) {
+  const languages = useLanguages();
+  return /*#__PURE__*/React__default.createElement("select", {
+    className: className,
+    onChange: e => native.tx.setCurrentLocale(e.target.value)
+  }, /*#__PURE__*/React__default.createElement("option", {
+    value: sourceLanguage.code
+  }, sourceLanguage.name), languages.map(({
+    name,
+    code
+  }) => /*#__PURE__*/React__default.createElement("option", {
+    key: code,
+    value: code
+  }, name)));
+}
+LanguagePicker.propTypes = {
+  sourceLanguage: PropTypes.shape({
+    name: PropTypes.string,
+    code: PropTypes.string
+  }),
+  className: PropTypes.string
+};
+LanguagePicker.defaultProps = {
+  sourceLanguage: {
+    code: 'en',
+    name: 'English'
+  },
+  className: ''
+};
+
 function T({
   _str,
   _html,
-  _inline
+  _inline,
+  ...props
 }) {
@@ -20,3 +72,4 @@ const [translation, setTranslation] = React.useState('');
           _html,
-          _inline
+          _inline,
+          ...props
         }));
@@ -27,3 +80,4 @@ } else {
           _inline,
-          _escapeVars: true
+          _escapeVars: true,
+          ...props
         });
@@ -59,5 +113,5 @@ const parentProps = {
 
-const T$1 = T;
-
-exports.T = T$1;
+exports.LanguagePicker = LanguagePicker;
+exports.T = T;
+exports.useLanguages = useLanguages;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

 import React, { useState, useEffect } from 'react';
+import { tx, onEvent, LOCALE_CHANGED, offEvent, t } from '@transifex/native';
 import PropTypes from 'prop-types';
-import { onEvent, LOCALE_CHANGED, offEvent, t } from '@transifex/native';
 
+function useLanguages() {
+  const [languages, setLanguages] = useState([]);
+  useEffect(() => {
+    const fetch = function () {
+      try {
+        return Promise.resolve(tx.getLanguages()).then(function (_tx$getLanguages) {
+          setLanguages(_tx$getLanguages);
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    fetch();
+  }, []);
+  return languages;
+}
+
+function LanguagePicker({
+  sourceLanguage,
+  className
+}) {
+  const languages = useLanguages();
+  return /*#__PURE__*/React.createElement("select", {
+    className: className,
+    onChange: e => tx.setCurrentLocale(e.target.value)
+  }, /*#__PURE__*/React.createElement("option", {
+    value: sourceLanguage.code
+  }, sourceLanguage.name), languages.map(({
+    name,
+    code
+  }) => /*#__PURE__*/React.createElement("option", {
+    key: code,
+    value: code
+  }, name)));
+}
+LanguagePicker.propTypes = {
+  sourceLanguage: PropTypes.shape({
+    name: PropTypes.string,
+    code: PropTypes.string
+  }),
+  className: PropTypes.string
+};
+LanguagePicker.defaultProps = {
+  sourceLanguage: {
+    code: 'en',
+    name: 'English'
+  },
+  className: ''
+};
+
 function T({
   _str,
   _html,
-  _inline
+  _inline,
+  ...props
 }) {
@@ -16,3 +68,4 @@ const [translation, setTranslation] = useState('');
           _html,
-          _inline
+          _inline,
+          ...props
         }));
@@ -23,3 +76,4 @@ } else {
           _inline,
-          _escapeVars: true
+          _escapeVars: true,
+          ...props
         });
@@ -55,5 +109,3 @@ const parentProps = {
 
-const T$1 = T;
-
-export { T$1 as T };
+export { LanguagePicker, T, useLanguages };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "@transifex/react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Transifex Native for React",
@@ -44,3 +44,3 @@ "keywords": [
     "@testing-library/react": "^10.4.9",
-    "@transifex/native": "^0.3.0",
+    "@transifex/native": "^0.4.0",
     "eslint": "^6.6.0",
@@ -47,0 +47,0 @@ "eslint-config-airbnb": "^18.2.0",

README.md

@@ -13,6 +13,8 @@ # Transifex Native for React
 
-```npm install @transifex/native @transifex/react --save```
+`npm install @transifex/native @transifex/react --save`
 
 ## Usage
 
+### T component
+
 ```jsx
@@ -60,4 +62,77 @@ import React, { Component } from 'react';
 
+### `useLanguages` hook
+
+Returns a state variable that will eventually hold the supported languages of
+the application. Makes an asynchronous call to the CDS.
+
+```jsx
+import React from 'react';
+import { useLanguages } from '@transifex/react';
+
+function LanguageList () {
+  const languages = useLanguages();
+  return (
+    <ul>
+      {languages.map(({ code, name }) => (
+        <li key={code}>
+          <strong>{code}</strong>: {name}
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### `LanguagePicker` component
+
+Renders a `<select>` tag that displays supported languages and switches the
+application's selected language on change. Uses `useLanguages` internally.
+
+```jsx
+import React from 'react';
+import { T, LanguagePicker } from '@transifex/react';
+
+function App () {
+  return (
+    <div>
+      <T _str="This is a translatable message" />
+      <LanguagePicker />
+    </div>
+  );
+}
+```
+
+Accepts properties:
+
+- `sourceLanguage`: defaults to `{code: 'en', name: 'English'}`
+- `className`: The CSS class that will be applied to the `<select>` tag
+
+If you want something different than a `<select>`, it should be easy to write
+your own language picker using `useLanguages`:
+
+```jsx
+import React from 'react';
+import { tx } from '@transifex/native';
+import { useLanguages } from '@transifex/react';
+
+function MyLanguagePicker () {
+  const languages = useLanguages();
+
+  return (
+    <>
+      <button onClick={() => tx.setCurrentLocale('en')}>
+        English
+      </button>
+      {languages.map(({ code, name }) => (
+        <button key={code} onClick={() => tx.setCurrentLocale(code)}>
+          {name}
+        </button>
+      ))}
+    </>
+  );
+}
+```
+
 # License
 
 Licensed under Apache License 2.0, see [LICENSE](https://github.com/transifex/transifex-javascript/blob/HEAD/LICENSE) file.

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22707

92.45%

Lines of code

206

98.08%

Number of lines in readme file

137

120.97%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes