style: explicit React imports

src/Trans.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext, isValidElement, cloneElement, createElement } from 'react';
 import HTML from 'html-parse-stringify';
 import { unescape } from 'html-escaper';
 import { getI18n, I18nContext, getDefaults } from './context';
@@ -18,7 +18,7 @@ function getChildren(node) {
 
 function hasValidReactChildren(children) {
   if (Object.prototype.toString.call(children) !== '[object Array]') return false;
-  return children.every((child) => React.isValidElement(child));
+  return children.every((child) => isValidElement(child));
 }
 
 function getAsArray(data) {
@@ -49,7 +49,7 @@ export function nodesToString(children, i18nOptions) {
       // actual e.g. lorem
       // expected e.g. lorem
       stringNode += `${child}`;
-    } else if (React.isValidElement(child)) {
+    } else if (isValidElement(child)) {
       const childPropsCount = Object.keys(child.props).length;
       const shouldKeepChild = keepArray.indexOf(child.type) > -1;
       const childChildren = child.props.children;
@@ -124,7 +124,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
     childrenArray.forEach((child) => {
       if (typeof child === 'string') return;
       if (hasChildren(child)) getData(getChildren(child));
-      else if (typeof child === 'object' && !React.isValidElement(child))
+      else if (typeof child === 'object' && !isValidElement(child))
         Object.assign(data, child);
     });
   }
@@ -145,7 +145,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
 
   function pushTranslatedJSX(child, inner, mem, i, isVoid) {
     if (child.dummy) child.children = inner; // needed on preact!
-    mem.push(React.cloneElement(child, { ...child.props, key: i }, isVoid ? undefined : inner));
+    mem.push(cloneElement(child, { ...child.props, key: i }, isVoid ? undefined : inner));
   }
 
   // reactNode (the jsx root element or child)
@@ -171,7 +171,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
         const child =
           Object.keys(node.attrs).length !== 0 ? mergeProps({ props: node.attrs }, tmp) : tmp;
 
-        const isElement = React.isValidElement(child);
+        const isElement = isValidElement(child);
 
         const isValidTranslationWithChildren =
           isElement && hasChildren(node, true) && !node.voidElement;
@@ -203,22 +203,22 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
             node.children,
             rootReactNode,
           );
-          mem.push(React.cloneElement(child, { ...child.props, key: i }, inner));
+          mem.push(cloneElement(child, { ...child.props, key: i }, inner));
         } else if (Number.isNaN(parseFloat(node.name))) {
           if (isKnownComponent) {
             const inner = renderInner(child, node, rootReactNode);
             pushTranslatedJSX(child, inner, mem, i, node.voidElement);
           } else if (i18nOptions.transSupportBasicHtmlNodes && keepArray.indexOf(node.name) > -1) {
             if (node.voidElement) {
-              mem.push(React.createElement(node.name, { key: `${node.name}-${i}` }));
+              mem.push(createElement(node.name, { key: `${node.name}-${i}` }));
             } else {
               const inner = mapAST(
                 reactNodes /* wrong but we need something */,
                 node.children,
                 rootReactNode,
               );
 
-              mem.push(React.createElement(node.name, { key: `${node.name}-${i}` }, inner));
+              mem.push(createElement(node.name, { key: `${node.name}-${i}` }, inner));
             }
           } else if (node.voidElement) {
             mem.push(`<${node.name} />`);
@@ -242,17 +242,17 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
         } else if (node.children.length === 1 && translationContent) {
           // If component does not have children, but translation - has
           // with this in component could be components={[<span class='make-beautiful'/>]} and in translation - 'some text <0>some highlighted message</0>'
-          mem.push(React.cloneElement(child, { ...child.props, key: i }, translationContent));
+          mem.push(cloneElement(child, { ...child.props, key: i }, translationContent));
         } else {
-          mem.push(React.cloneElement(child, { ...child.props, key: i }));
+          mem.push(cloneElement(child, { ...child.props, key: i }));
         }
       } else if (node.type === 'text') {
         const wrapTextNodes = i18nOptions.transWrapTextNodes;
         const content = shouldUnescape
           ? unescape(i18n.services.interpolator.interpolate(node.content, opts, i18n.language))
           : i18n.services.interpolator.interpolate(node.content, opts, i18n.language);
         if (wrapTextNodes) {
-          mem.push(React.createElement(wrapTextNodes, { key: `${node.name}-${i}` }, content));
+          mem.push(createElement(wrapTextNodes, { key: `${node.name}-${i}` }, content));
         } else {
           mem.push(content);
         }
@@ -339,5 +339,5 @@ export function Trans({
   // and override `defaultTransParent` if is present
   const useAsParent = parent !== undefined ? parent : reactI18nextOptions.defaultTransParent;
 
-  return useAsParent ? React.createElement(useAsParent, additionalProps, content) : content;
+  return useAsParent ? createElement(useAsParent, additionalProps, content) : content;
 }

src/context.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createContext } from 'react';
 
 let defaultOptions = {
   bindI18n: 'languageChanged',
@@ -14,7 +14,7 @@ let defaultOptions = {
 
 let i18nInstance;
 
-export const I18nContext = React.createContext();
+export const I18nContext = createContext();
 
 export function setDefaults(options = {}) {
   defaultOptions = { ...defaultOptions, ...options };

src/withSSR.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement } from 'react';
 import { useSSR } from './useSSR';
 import { composeInitialProps } from './context';
 import { getDisplayName } from './utils';
@@ -8,7 +8,7 @@ export function withSSR() {
     function I18nextWithSSR({ initialI18nStore, initialLanguage, ...rest }) {
       useSSR(initialI18nStore, initialLanguage);
 
-      return React.createElement(WrappedComponent, {
+      return createElement(WrappedComponent, {
         ...rest,
       });
     }

src/withTranslation.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement, forwardRef as forwardRefReact } from 'react';
 import { useTranslation } from './useTranslation';
 import { getDisplayName } from './utils';
 
@@ -18,7 +18,7 @@ export function withTranslation(ns, options = {}) {
       } else if (!options.withRef && forwardedRef) {
         passDownProps.forwardedRef = forwardedRef;
       }
-      return React.createElement(WrappedComponent, passDownProps);
+      return createElement(WrappedComponent, passDownProps);
     }
 
     I18nextWithTranslation.displayName = `withI18nextTranslation(${getDisplayName(
@@ -28,8 +28,8 @@ export function withTranslation(ns, options = {}) {
     I18nextWithTranslation.WrappedComponent = WrappedComponent;
 
     const forwardRef = (props, ref) =>
-      React.createElement(I18nextWithTranslation, Object.assign({}, props, { forwardedRef: ref }));
+      createElement(I18nextWithTranslation, Object.assign({}, props, { forwardedRef: ref }));
 
-    return options.withRef ? React.forwardRef(forwardRef) : I18nextWithTranslation;
+    return options.withRef ? forwardRefReact(forwardRef) : I18nextWithTranslation;
   };
 }