v1.0.0 useTranslateHtmlElement and useTranslateFormErrors hooks added

Author: devakone

.npmignore

@@ -0,0 +1,4 @@
+src
+demo
+.babelrc
+webpack.config.js

README.md

@@ -1,2 +1,172 @@
 # react-i18next-helpers
-A set of helper hooks and components to use with i18next, react-i18next and Formik
+A set of helper hooks and components to use with i18next, react-i18next and Formik; i18next makes translating a breeze in apps, and using the react-i18next opens up the API for most React Applications. However, there are blind spots like with any other libraries. These helpers are here to help you cover these blind spots.
+
+## Using Formik and translating errors
+If you use Formik and you have errors rendered on the screen, you will notice that if you change the current language, your errors remain in the language they were before the translation. This library gives you a hook you can use to make sure that when the i18n language changes, your form errors are also translated.
+
+### Render Example 
+
+This example is based on using the `render` method for rendering a Formik form
+
+```
+
+...
+<Formik component={ContactForm} />;
+...
+
+import useTranslateFormErrors from '../../hooks/use-translate-form-errors';
+
+const ContactForm = ({
+  handleSubmit,
+  handleChange,
+  handleBlur,
+  values,
+  errors,
+  touched,
+  setFieldTouched
+}) => {
+  
+ useTranslateFormErrors(errors, touched, setFieldTouched);
+
+return (
+  <form onSubmit={handleSubmit}>
+    <input
+      type="text"
+      onChange={handleChange}
+      onBlur={handleBlur}
+      value={values.name}
+      name="name"
+    />
+    {errors.name && <div>{errors.name}</div>}
+    <button type="submit">Submit</button>
+  </form>
+);
+
+}
+
+```
+
+Just passing the `errors`, `touched`, and `setFieldTouched` FormikProps to the hook in your render method ensures that your errors will get translated if the language changes.
+
+### HOC Example 
+
+```
+<Formik
+  render={({ handleSubmit, handleChange, handleBlur, setFieldTouched, values, errors, touched }) => (
+    <WithTranslateFormErrors errors={errors} touched={touched} setFieldTouched={setFieldTouched}>
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          onChange={handleChange}
+          onBlur={handleBlur}
+          value={values.name}
+          name="name"
+        />
+        {errors.name &&
+          <div>
+            {errors.name}
+          </div>}
+        <button type="submit">Submit</button>
+      </form>
+    </WithTranslateFormErrors>
+  )}
+/>
+
+import PropTypes from 'prop-types';
+import React, { useEffect }  from 'react';
+import { useTranslation } from 'react-i18next';
+
+const useTranslateFormErrors = (errors, touched, setFieldTouched) => {
+  const { i18n } = useTranslation();
+  useEffect(() => {
+    i18n.on('languageChanged', lng => {
+      Object.keys(errors).forEach(fieldName => {
+        if (Object.keys(touched).includes(fieldName)) {
+          setFieldTouched(fieldName);
+        }
+      });
+    });
+    return () => {
+      i18n.off('languageChanged', lng => {});
+    };
+  }, [errors]);
+};
+
+
+const WithTranslateFormErrors = ({ errors, touched, setFieldTouched,  children }) => {
+  useTranslateFormErrors(errors, touched, setFieldTouched);
+  return <>{children}</>;
+};
+
+WithTranslateFormErrors.propTypes = {
+  form: PropTypes.object
+};
+
+export default WithTranslateFormErrors;
+
+
+```
+
+
+
+Just passing the `errors`, `touched`, and `setFieldTouched` FormikProps to the HOC in your render method ensures that your errors will get translated if the language changes.
+
+## Translating raw or dynamic HTML
+
+If you're ever in need of translating HTML you're adding dynamically to your app, and to keep content in that HTML translated, you can use the `useTranslateHtmlElement` hook.
+
+```
+
+import dompurify from 'dompurify';
+import useTranslateHtmlElement from './use-translate-html-element';
+// Our safe HTML rendering component
+// From https://dev.to/jam3/how-to-prevent-xss-attacks-when-using-dangerouslysetinnerhtml-in-react-1464
+
+function SafeHTMLComponent() {
+  // title is dynamic HTML
+  const title = response.from.backend.title;
+  // sanitizer will sanitize the HTML
+  const sanitizer = dompurify.sanitize;
+  const safeTitle = sanitizer(title);
+  const [ref] = useTranslateHtmlElement(safeTitle);
+  return
+  
+  import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const translateI18nTokensInHtmlElement = (i18n, htmlElement) => {
+  const i18nTokenNodes = htmlElement.querySelectorAll('[data-i18n]');
+  for (let i = 0; i < i18nTokenNodes.length; i++) {
+    i18nTokenNodes[i].innerHTML = i18n.t(i18nTokenNodes[i].getAttribute('data-i18n'));
+  }
+};
+
+const useTranslateHtmlElement = html => {
+  const { i18n } = useTranslation();
+  const [node, setRef] = useState(null);
+  const translateIfNodeRendered = node => {
+    if (node) {
+      translateI18nTokensInHtmlElement(i18n, node);
+    }
+  };
+  useEffect(() => {
+    translateIfNodeRendered(node);
+
+    i18n.on('languageChanged', lng => {
+      translateIfNodeRendered(node);
+    });
+    return () => {
+      i18n.off('languageChanged', lng => {});
+    };
+  }, [html]);
+  return [setRef];
+};
+
+export default useTranslateHtmlElement;
+
+```
+
+
+
+
+The example is self explanatory. 

babel.config.js

@@ -0,0 +1,11 @@
+module.exports = function (api) {
+	api.cache(true);
+
+	const presets = [ "@babel/preset-env", "@babel/preset-react" ];
+	const plugins = [ ];
+
+	return {
+		presets,
+		plugins
+	};
+};

dist/hoc/WithTranslateFormErrors.js

@@ -2,10 +2,14 @@
   "name": "react-i18next-helpers",
   "version": "1.0.0",
   "description": "A set of helper hooks and components to use with i18next, react-i18next and Formik",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
-    "test": "npm run test"
+    "test": "npm run test",
+    "prepublishOnly": "babel ./src --out-dir ./dist -s inline"
   },
+  "files": [
+    "dist/*"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/devakone/react-i18next-helpers.git"
@@ -22,5 +26,15 @@
   "bugs": {
     "url": "https://github.com/devakone/react-i18next-helpers/issues"
   },
-  "homepage": "https://github.com/devakone/react-i18next-helpers#readme"
+  "homepage": "https://github.com/devakone/react-i18next-helpers#readme",
+  "devDependencies": {
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.5",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/preset-react": "^7.0.0",
+    "formik": "^1.5.7",
+    "i18next": "^17.0.3",
+    "react": "^16.8.6",
+    "react-i18next": "^10.11.0"
+  }
 }