refactor: remove React import and replace React.FC

Author: t49tran

src/google-recaptcha-provider.tsx

@@ -1,5 +1,11 @@
-import * as React from 'react';
-import { FC, useMemo, useState, useEffect, useCallback } from 'react';
+import {
+  useMemo,
+  useState,
+  useEffect,
+  useCallback,
+  createContext,
+  ReactNode
+} from 'react';
 import { cleanGoogleRecaptcha, injectGoogleReCaptchaScript } from './utils';
 
 enum GoogleRecaptchaError {
@@ -18,31 +24,32 @@ interface IGoogleReCaptchaProviderProps {
     appendTo?: 'head' | 'body';
     id?: string;
   };
+  children: ReactNode;
 }
 
 export interface IGoogleReCaptchaConsumerProps {
   executeRecaptcha?: (action?: string) => Promise<string>;
 }
 
-const GoogleReCaptchaContext = React.createContext<IGoogleReCaptchaConsumerProps>(
-  {
-    executeRecaptcha: () => {
-      // This default context function is not supposed to be called
-      throw Error('GoogleReCaptcha Context has not yet been implemented');
-    }
+const GoogleReCaptchaContext = createContext<IGoogleReCaptchaConsumerProps>({
+  executeRecaptcha: () => {
+    // This default context function is not supposed to be called
+    throw Error(
+      'GoogleReCaptcha Context has not yet been implemented, if you are using useGoogleReCaptcha hook, make sure the hook is called inside component wrapped by GoogleRecaptchaProvider'
+    );
   }
-);
+});
 
 const { Consumer: GoogleReCaptchaConsumer } = GoogleReCaptchaContext;
 
-export const GoogleReCaptchaProvider: FC<IGoogleReCaptchaProviderProps> = ({
+export function GoogleReCaptchaProvider({
   reCaptchaKey,
   useEnterprise = false,
   useRecaptchaNet = false,
   scriptProps,
   language,
   children
-}) => {
+}: IGoogleReCaptchaProviderProps) {
   const [greCaptchaInstance, setGreCaptchaInstance] = useState<null | {
     execute: Function;
   }>(null);
@@ -115,6 +122,6 @@ export const GoogleReCaptchaProvider: FC<IGoogleReCaptchaProviderProps> = ({
       {children}
     </GoogleReCaptchaContext.Provider>
   );
-};
+}
 
 export { GoogleReCaptchaConsumer, GoogleReCaptchaContext };

src/google-recaptcha.tsx

@@ -1,15 +1,12 @@
-import { FC, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useGoogleReCaptcha } from './use-google-recaptcha';
 
 export interface IGoogleRecaptchaProps {
   onVerify: (token: string) => void | Promise<void>;
   action?: string;
 }
 
-export const GoogleReCaptcha: FC<IGoogleRecaptchaProps> = ({
-  action,
-  onVerify
-}) => {
+export function GoogleReCaptcha({ action, onVerify }: IGoogleRecaptchaProps) {
   const googleRecaptchaContextValue = useGoogleReCaptcha();
 
   useEffect(() => {
@@ -35,4 +32,4 @@ export const GoogleReCaptcha: FC<IGoogleRecaptchaProps> = ({
   }, [action, onVerify, googleRecaptchaContextValue]);
 
   return null;
-};
+}

src/use-google-recaptcha.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react';
+import { useContext } from 'react';
 import { GoogleReCaptchaContext } from './google-recaptcha-provider';
 
-export const useGoogleReCaptcha = () =>
-  React.useContext(GoogleReCaptchaContext);
+export const useGoogleReCaptcha = () => useContext(GoogleReCaptchaContext);

src/with-google-recaptcha.tsx

@@ -1,5 +1,5 @@
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import * as React from 'react';
+import { ComponentType } from 'react';
 import {
   GoogleReCaptchaConsumer,
   IGoogleReCaptchaConsumerProps
@@ -10,22 +10,22 @@ export interface IWithGoogleReCaptchaProps {
 }
 
 // tslint:disable-next-line:only-arrow-functions
-export const withGoogleReCaptcha = function<OwnProps>(
-  Component: React.ComponentType<OwnProps & Partial<IWithGoogleReCaptchaProps>>
-): React.ComponentType<OwnProps & Partial<IWithGoogleReCaptchaProps>> {
-  const WithGoogleReCaptchaComponent: React.FunctionComponent<
-    OwnProps & Partial<IWithGoogleReCaptchaProps>
-  > = props => (
+export const withGoogleReCaptcha = function <OwnProps>(
+  Component: ComponentType<OwnProps & Partial<IWithGoogleReCaptchaProps>>
+): ComponentType<OwnProps & Partial<IWithGoogleReCaptchaProps>> {
+  const WithGoogleReCaptchaComponent = (
+    props: OwnProps & Partial<IWithGoogleReCaptchaProps>
+  ) => (
     <GoogleReCaptchaConsumer>
       {googleReCaptchaValues => (
         <Component {...props} googleReCaptchaProps={googleReCaptchaValues} />
       )}
     </GoogleReCaptchaConsumer>
   );
 
-  WithGoogleReCaptchaComponent.displayName = `withGoogleReCaptcha(${Component.displayName ||
-    Component.name ||
-    'Component'})`;
+  WithGoogleReCaptchaComponent.displayName = `withGoogleReCaptcha(${
+    Component.displayName || Component.name || 'Component'
+  })`;
 
   hoistNonReactStatics(WithGoogleReCaptchaComponent, Component);