All the features work as Components as well as feature and provide support of default/multi export

.eslintrc.json

@@ -21,7 +21,9 @@
     "react/jsx-fragments": ["off" ],
     "react/jsx-props-no-spreading": ["off"],
     "func-names": ["off"],
-    "no-restricted-exports": ["off"]
+    "no-restricted-exports": ["off"],
+    "import/no-named-as-default": 0,
+    "react/require-default-props": ["off"]
   },
   "parserOptions": {
     "ecmaVersion":"latest"

.github/README.md

@@ -89,9 +89,11 @@ import Share from 'fe-pilot/Share';
 >  00. :white_check_mark:   [FaceDetector](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/FaceDetector/README.md)
 >  00. :white_check_mark:   [LiveLocation](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/LiveLocationTracking/README.md)
 >  00. :white_check_mark:   [LocateMe](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/LocateMe/README.md)
+>  00. :white_check_mark:   [NetworkConnection](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/NetworkConnection/README.md)
 >  00. :white_check_mark:   [PhoneBook](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/PhoneBook/README.md)
 >  00. :white_check_mark:   [Scanner](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Scanner/README.md)
 >  00. :white_check_mark:   [Share](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Share/README.md)
+>  00. :white_check_mark:   [SnapScanner](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/SnapScanner/README.md)
 >  00. :white_check_mark:   [TextToSpeech](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/TextToSpeech/README.md)
 >  00. :white_check_mark:   [VoiceRecognition](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/VoiceRecognition/README.md)
 >  00. :white_check_mark:   [Vibrate](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Vibrate/README.md)

README.md

@@ -89,14 +89,16 @@ import Share from 'fe-pilot/Share';
 4. :white_check_mark:   [FaceDetector](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/FaceDetector/README.md)
 5. :white_check_mark:   [LiveLocation](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/LiveLocationTracking/README.md)
 6. :white_check_mark:   [LocateMe](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/LocateMe/README.md)
-7. :white_check_mark:   [PhoneBook](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/PhoneBook/README.md)
-8. :white_check_mark:   [Scanner](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Scanner/README.md)
-9. :white_check_mark:   [Share](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Share/README.md)
-10. :white_check_mark:   [TextToSpeech](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/TextToSpeech/README.md)
-11. :white_check_mark:   [VoiceRecognition](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/VoiceRecognition/README.md)
-12. :white_check_mark:   [Vibrate](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Vibrate/README.md)
-13. :white_check_mark:   [WakeLock](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/WakeLock/README.md)
-14. :white_check_mark:   [WhatsappShare](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/WhatsappShare/README.md)
+7. :white_check_mark:   [NetworkConnection](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/NetworkConnection/README.md)
+8. :white_check_mark:   [PhoneBook](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/PhoneBook/README.md)
+9. :white_check_mark:   [Scanner](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Scanner/README.md)
+10. :white_check_mark:   [Share](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Share/README.md)
+11. :white_check_mark:   [SnapScanner](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/SnapScanner/README.md)
+12. :white_check_mark:   [TextToSpeech](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/TextToSpeech/README.md)
+13. :white_check_mark:   [VoiceRecognition](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/VoiceRecognition/README.md)
+14. :white_check_mark:   [Vibrate](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Vibrate/README.md)
+15. :white_check_mark:   [WakeLock](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/WakeLock/README.md)
+16. :white_check_mark:   [WhatsappShare](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/WhatsappShare/README.md)
 </details>
 
 ## Online Editor Templates

__app/component/CopyToClipboard/CopyToClipboard.js

@@ -8,7 +8,7 @@ const failureMsgDefault = {
   error: 'Unable To Copy',
 };
 
-const isBrowserSupport = () => globalThis?.navigator?.clipboard;
+const isBrowserSupport = () => globalThis.navigator?.clipboard;
 
 const copyToClipboard = ({
   successCb = () => {},

__app/component/LocateMe/LocateMe.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import Wrapper from '../Wrapper/Wrapper';
 import { handleSuccess, handleError, handleLoading } from '../services/handlerService';
+import Wrapper from '../Wrapper/Wrapper';
 import dependentJsService from '../services/dependentJsService';
 
 const failureMsgDefault = {
@@ -14,6 +14,10 @@ const failureMsgDefault = {
   error: '',
 };
 
+const isBrowserSupport = () => globalThis.navigator?.geolocation
+  && globalThis.navigator?.permissions?.query
+  && globalThis.navigator?.geolocation?.getCurrentPosition;
+
 const checkPermitByBrowser = async (failureMsg, failureCb) => {
   try {
     const permissions = await navigator.permissions.query({ name: 'geolocation' });
@@ -83,23 +87,24 @@ const onSuccss = async (
   handleSuccess({ msgType: 'SUCCESSFUL', msg: successMsg, successCb, data: zipcode });
 };
 
-const onFailure = async (failureCb, error, failureMsg) => handleError({ msgType: 'ERROR', msg: failureMsg.error || JSON.stringify(error), failureCb });
-
-function LocateMe({
-  successCb,
-  failureCb,
-  successMsg,
-  failureMsg: failureMsgProps,
-  loadingCb,
-  children,
-  isProdKey,
-  googleKey,
-}) {
+const onFailure = async (failureCb, error, failureMsg) => handleError({ msgType: 'ERROR', msg: failureMsg.error || error, failureCb });
+
+const locateMe = ({
+  successCb = () => {},
+  failureCb = () => {},
+  loadingCb = () => {},
+  successMsg = 'Located Successfully!!',
+  failureMsg: failureMsgProps = { ...failureMsgDefault },
+  isProdKey = true,
+  googleKey = '',
+} = {}) => {
   const failureMsg = { ...failureMsgDefault, ...failureMsgProps };
 
-  const onClick = async () => {
-    if (LocateMe.isBrowserSupport()) {
+  const init = async () => {
+    if (isBrowserSupport()) {
       handleLoading({ loadingCb });
+
+      // Your Code will start from here
       const isPermitByBrowser = await checkPermitByBrowser(failureMsg, failureCb);
       const isScriptInBrowser = await checkScriptInBrowser(
         failureMsg,
@@ -120,12 +125,25 @@ function LocateMe({
           onFailure(failureCb, error, failureMsg);
         });
       }
+      // Your Code will end here
     } else {
       return handleError({ msgType: 'UN_SUPPORTED_FEATURE', msg: failureMsg.unSupported, failureCb });
     }
     return true;
   };
 
+  init();
+};
+
+function LocateMe({
+  children,
+  successCb,
+  failureCb,
+  loadingCb,
+  successMsg,
+  failureMsg,
+  ...props
+}) {
   useEffect(() => {
     globalThis.console.error = (...arg) => {
       if (arg[0] && arg[0]?.indexOf('https://developers.google.com/maps/documentation/javascript/error-messages') !== -1) {
@@ -138,36 +156,31 @@ function LocateMe({
     };
   }, []);
 
-  return (
-    React.Children.map(children || 'Use my current location', (child) => React.cloneElement(typeof child === 'string' ? <span>{child}</span> : child, {
-      onClick,
-    }))
-  );
+  return React.Children.map(children || 'LocateMe', (child) => React.cloneElement(typeof child === 'string' ? <span>{child}</span> : child, {
+    onClick: () => locateMe({
+      successCb,
+      failureCb,
+      loadingCb,
+      successMsg,
+      failureMsg,
+      ...props,
+    }),
+  }));
 }
 
-LocateMe.isBrowserSupport = () => navigator.geolocation
-  && navigator?.permissions?.query
-  && navigator?.geolocation?.getCurrentPosition
-  && true;
-
 LocateMe.propTypes = {
+  showForever: PropTypes.bool,
   successCb: PropTypes.func,
   failureCb: PropTypes.func,
   loadingCb: PropTypes.func,
   successMsg: PropTypes.string,
   failureMsg: PropTypes.object,
   isProdKey: PropTypes.bool,
-  googleKey: PropTypes.string.isRequired,
+  googleKey: PropTypes.string,
 };
 
-LocateMe.defaultProps = {
-  successCb: () => {},
-  failureCb: () => {},
-  loadingCb: () => {},
-  successMsg: 'Located Successfully',
-  failureMsg: { ...failureMsgDefault },
-  isProdKey: true,
-  googleKey: '',
-};
+const WLocateMe = Wrapper(LocateMe, isBrowserSupport);
+
+export { locateMe, WLocateMe as LocateMe };
 
-export default Wrapper(LocateMe);
+export default WLocateMe;

__app/component/LocateMe/index.js

@@ -1,5 +1,2 @@
-import LocateMe from './LocateMe';
-
-export { LocateMe };
-
-export default LocateMe;
+export * from './LocateMe';
+export { default } from './LocateMe';

__app/component/NetworkConnection/NetworkConnection.js

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import {
+  handleSuccess,
+  handleError,
+  handleLoading,
+} from '../services/handlerService';
+import Wrapper from '../Wrapper/Wrapper';
+
+const failureMsgDefault = {
+  unSupported: 'NetworkConnection is not supporting in your device',
+  error: 'Unable to fetch details from NetworkConnection',
+};
+
+const isBrowserSupport = () => globalThis?.navigator?.onLine || false;
+
+const networkConnection = ({
+  successCb = () => {},
+  failureCb = () => {},
+  loadingCb = () => {},
+  successMsg = 'NetworkConnection details fetch Successfully!',
+  failureMsg: failureMsgProps = { ...failureMsgDefault },
+} = {}) => {
+  const failureMsg = { ...failureMsgDefault, ...failureMsgProps };
+
+  const init = () => {
+    if (isBrowserSupport() === true || isBrowserSupport() === false) {
+      handleLoading({ loadingCb });
+
+      handleSuccess({
+        msgType: 'SUCCESSFUL',
+        msg: successMsg,
+        successCb,
+        data: {
+          online: isBrowserSupport(),
+          connectionDetail: globalThis?.navigator?.connection,
+        },
+      });
+    } else {
+      return handleError({
+        msgType: 'UN_SUPPORTED_FEATURE',
+        msg: failureMsg.unSupported,
+        failureCb,
+      });
+    }
+    return true;
+  };
+
+  init();
+};
+
+function NetworkConnection({
+  children,
+  successCb,
+  failureCb,
+  loadingCb,
+  successMsg,
+  failureMsg,
+}) {
+  const [isOnline, setIsOnline] = useState(isBrowserSupport());
+
+  const onlineOfflineHandler = () => {
+    setIsOnline(isBrowserSupport());
+    networkConnection(successCb, failureCb, loadingCb, successMsg, failureMsg);
+  };
+
+  const networkChangeHandler = () => {
+    if (!isBrowserSupport()) return;
+
+    networkConnection(successCb, failureCb, loadingCb, successMsg, failureMsg);
+  };
+
+  useEffect(() => {
+    networkConnection(successCb, failureCb, loadingCb, successMsg, failureMsg);
+
+    globalThis.addEventListener('online', onlineOfflineHandler);
+    globalThis.addEventListener('offline', onlineOfflineHandler);
+    globalThis?.navigator.connection.addEventListener('change', networkChangeHandler);
+
+    return () => {
+      globalThis.removeEventListener('online', onlineOfflineHandler);
+      globalThis.removeEventListener('offline', onlineOfflineHandler);
+      globalThis.navigator.connection.removeEventListener('change', networkChangeHandler);
+    };
+  }, []);
+
+  return React.Children.map(children || 'NetworkConnection', (child) => React.cloneElement(
+    typeof child === 'string' ? <span>{child}</span> : child,
+    {
+      isOnline,
+    },
+  ));
+}
+
+NetworkConnection.propTypes = {
+  showForever: PropTypes.bool,
+  successCb: PropTypes.func,
+  failureCb: PropTypes.func,
+  loadingCb: PropTypes.func,
+  successMsg: PropTypes.string,
+  failureMsg: PropTypes.object,
+};
+
+const WNetworkConnection = Wrapper(NetworkConnection, isBrowserSupport);
+
+export { networkConnection, WNetworkConnection as NetworkConnection };
+
+export default WNetworkConnection;

__app/component/NetworkConnection/Offline.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Offline({ children, isOnline }) {
+  return !isOnline && React.Children.map(children || 'Online', (child) => React.cloneElement(typeof child === 'string' ? <span>{child}</span> : child));
+}
+
+export default Offline;

__app/component/NetworkConnection/Online.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Online({ children, isOnline }) {
+  return isOnline && React.Children.map(children || 'Online', (child) => React.cloneElement(typeof child === 'string' ? <span>{child}</span> : child));
+}
+
+export default Online;

__app/component/NetworkConnection/README.md

@@ -0,0 +1,30 @@
+
+# Network Connection
+
+A Network Connection Component returns online status and also information about the system's connection in terms of general connection type (e.g., 'Wi-Fi, 'cellular', etc.). Which can be used to select high-definition content or low-definition content based on the user's connection.
+
+
+## Usage/Examples
+
+```javascript
+import { NetworkConnection, Online, Offline} from 'fe-pilot/NetworkConnection';
+
+  const success = (response) => {
+    console.log(response, " success response")
+  }
+
+  const failure = (response) => {
+    console.log(response, " failure response")
+  }
+
+  return (
+    <NetworkConnection successCb={success} failureCb={failure}>
+        <Online>Online</Online>
+        <Offline>
+            <div>Pass custom Html to be displayed when appeared offline</div>
+        </Offline>
+    </NetworkConnection>
+  );
+}
+```
+

__app/component/NetworkConnection/index.js

@@ -0,0 +1,7 @@
+import { NetworkConnection } from './NetworkConnection';
+import Online from './Online';
+import Offline from './Offline';
+
+export { NetworkConnection, Online, Offline };
+
+export default NetworkConnection;

__app/component/PhoneBook/PhoneBook.js

@@ -9,7 +9,7 @@ const failureMsgDefault = {
   error: 'Unable to fetch details from PhoneBook',
 };
 
-const isBrowserSupport = () => globalThis?.navigator?.contacts && globalThis?.ContactsManage;
+const isBrowserSupport = () => globalThis.navigator?.contacts && globalThis.ContactsManage;
 
 const phoneBook = ({
   successCb = () => {},