feat: scoping wrappers

.eslintrc.js

@@ -51,6 +51,8 @@ module.exports = {
         unnamedComponents: 'arrow-function',
       },
     ],
+    'react/jsx-props-no-spreading': 'off',
+    'react/jsx-no-useless-fragment': 'off',
     'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
   },
   globals: {

README.md

@@ -23,21 +23,24 @@ or with yarn
 ## Usage
 
 > DISCLAIMER!
-To be 100% legal please use the official [Google Translate API](https://cloud.google.com/translate). This project is mainly for pet projects and prototyping 😉. Always only use the most **recent version** of this package. This server is also very limited, for use in **production** see [PRODUCTION USAGE.](#production-usage)
+To be 100% legal please use the official [Google Translate API](https://cloud.google.com/translate). This project is mainly for pet projects and prototyping 😉. The server is very limited, for use in **production** see [PRODUCTION USAGE.](#production-usage) Always only use the most **recent version** of this package.
 
 ### To translate whole component:
 ```jsx
 import Translator from '@miracleufo/react-g-translator';
 
-return (
-  <Translator from='en' to='es'>
-    <div>
-      ...
-    </div>
-  </Translator>
-);
+const Component = () => {
+  ...
+  return (
+    <Translator from='en' to='es'>
+      <div>
+        ...
+      </div>
+    </Translator>
+  );
+}
 ```
-**NB:** Each non-void React element is translated like a paragraph, for best translation please avoid <br /> and use <p> instead; and end sentences with fullstop. **`<Translator />` `from` and `to` props will always override [`<Translate />`](#to-translate-specific-text-inline) `from` and `to` props.**
+**NB:** Each non-void React element is translated like a paragraph, for best translation please avoid <br /> and use <p> instead, and always end sentences with fullstop.
 
 ### To translate specific text inline:
 ```jsx
@@ -46,8 +49,12 @@ import { Translate } from '@miracleufo/react-g-translator';
 return (
   <div>
     ...
-    <p>Hello.</p>
-    <p><Translate from='en' to='fr'>Hello in French.</Translate></p>
+    <Translate from='en' to='fr'>Hello in French.</Translate>
+    {/* Can also be used within elements */}
+    <p>
+      <Translate from='en' to='de'>Welcome in German.</Translate>
+      Happy to meet you.
+    </p>
     ...
   </div>
 );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miracleufo/react-g-translator",
-  "version": "1.0.0",
+  "version": "9.0.7",
   "description": "A modern, free, lightweight npm package for translating react apps (component wrapper.) No API keys or language list files are required.",
   "author": "Miracle Ufodiama",
   "license": "MIT",

src/components/Translator.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-no-useless-fragment */
 import React, {
   JSX,
   ReactNode,
@@ -50,6 +49,11 @@ const recursivelyTranslate = (
   }
 
   if (isValidElement(node)) {
+    //  skip translation if functional component
+    //  for scoping of `to` & `from` props in nested components
+    //  (also applies to nested <Translator /> and <Translate /> wrappers)
+    if (typeof node.type === 'function') return node;
+
     if (node.type === 'textarea' || node.type === 'input' || node.type === 'img') {
       return (
         <TranslationInputImg
@@ -77,7 +81,7 @@ const Translator = ({
   to,
   shouldFallback,
 }: {
-  children: ReactNode | React.ReactElement<any, any> | Element | JSX.Element;
+  children: ReactNode | ReactElement<any, any> | Element | JSX.Element;
   from?: language;
   to?: language;
   shouldFallback?: boolean;

src/components/helpers/Translation.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-no-useless-fragment */
 import React from 'react';
 import determineRenderedText from '../../utils/determineRenderedText';
 import useTranslation from '../../queries/useTranslation';

src/components/helpers/TranslationInputImage.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-no-useless-fragment */
 import React, {
   ReactNode,
   ReactElement,