feat: removed react-toastify

README.md

@@ -145,34 +145,52 @@ ReactDOM.render(
 );
 ```
 
-### Customizing Toast Notifications
+### Usage in NextJs
 
-You can customize toast notifications using the `toastConfig` prop of the `OfflineSyncProvider` component. Refer to the `react-toastify` documentation for available options.
+To use this package inside NextJs Application you need to dynamically import the package in the following way:
 
 ```jsx
-import { OfflineSyncProvider } from './offline-sync-provider';
+// _app.tsx
 
-const App = () => {
-  // Your application components and logic
-};
+import { OfflineSyncProvider } from 'offline-sync-handler';
 
-const toastConfig = {
-  position: 'bottom-left',
-  autoClose: 3000,
-};
+export default function App({ Component, pageProps }: AppProps) {
+  const [packageModule, setPackageModule] = useState<{
+    OfflineSyncProvider: any | undefined;
+  }>();
+
+  useEffect(() => {
+    const fetchPackage = async () => {
+      try {
+        const packageModule = await import("offline-sync-handler");
+        setPackageModule(packageModule);
+      } catch (error) {
+        console.error("Error loading the npm package:", error);
+      }
+    };
+
+    fetchPackage();
+  }, []);
+
+  if (packageModule) {
+    return (
+      <packageModule.OfflineSyncProvider>
+        <Component {...pageProps} />
+      </packageModule.OfflineSyncProvider>
+    );
+  }
+
+  return (
+      <Component {...pageProps} />
+  );
+}
 
-const rootElement = document.getElementById('root');
-ReactDOM.render(
-  <OfflineSyncProvider toastConfig={toastConfig}>
-    <App />
-  </OfflineSyncProvider>,
-  rootElement
-);
 ```
 
 ## Roadmaps
 
- * Passing callbacks functions to be triggered on request success/failure.
+ - [x] Passing Success callback functions to be triggered on request success in case of offline.
+ - [ ] Proper NextJs Support.
 
 ## License
 

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.5",
+  "version": "0.1.7",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/api-helper.ts

@@ -1,6 +1,5 @@
 import axios from 'axios';
 import localForage from 'localforage';
-import { toast } from 'react-toastify';
 import { addCallBack, triggerCallback } from './callback-util';
 import { omit } from 'underscore';
 
@@ -74,7 +73,7 @@ export const sendRequest = async (config: any) => {
     config.id = generateUuid();
     // Perform the API request and handle retries
     if (!navigator.onLine) {
-      toast.info(
+      alert(
         'You are currently offline. We will automatically resend the request when you are back online.'
       );
     }
@@ -90,7 +89,7 @@ export const syncOfflineRequests = async () => {
     return;
   }
 
-  toast.info(`Back online! Your requests will sync with the server now`);
+  alert(`Back online! Your requests will sync with the server now`);
   for (const request of storedRequests) {
     console.log('ddd:', { storedRequests, request });
     if (request) {

src/index.tsx

@@ -8,8 +8,7 @@ import React, {
   useState,
 } from 'react';
 import { DataSyncContext } from './data-sync-context';
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+
 
 import {
   sendRequest,
@@ -19,7 +18,7 @@ import {
 
 // Check if window object exists
 const hasWindow = () => {
-  return typeof window !== 'undefined';
+  return window && typeof window !== 'undefined';
 };
 
 export const OfflineSyncProvider: FC<{
@@ -33,7 +32,7 @@ export const OfflineSyncProvider: FC<{
   const [isOnline, setIsOnline] = useState<boolean>(
     window.navigator.onLine ?? true
   );
-
+console.log({toastConfig})
   // Add event listeners for online/offline events
   useEffect(() => {
     if (!hasWindow()) {
@@ -72,19 +71,7 @@ export const OfflineSyncProvider: FC<{
         {render?.({ isOnline })}
         {children}
       </DataSyncContext.Provider>
-      <ToastContainer
-        position="top-right"
-        autoClose={5000}
-        hideProgressBar={false}
-        newestOnTop
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-        theme="dark"
-        {...toastConfig}
-      />
+
     </>
   );
 };