feat: ✨ added fallback for unsupported IndexedDB (#407)

.github/dependabot.yml

@@ -3,6 +3,6 @@ updates:
 - package-ecosystem: npm
   directory: "/"
   schedule:
-    interval: weekly
+    interval: monthly
     time: "23:30"
   open-pull-requests-limit: 10

.github/workflows/main.yml

@@ -11,7 +11,7 @@ jobs:
       - name: Use Node 14
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
 
       - name: Use cached node_modules
         uses: actions/cache@v1

README.md

@@ -61,7 +61,7 @@ const idbConfig = {
 
 // Wrap your child component into Provider
 const Container = () => (
-  <IndexedDBProvider config={idbConfig}>
+  <IndexedDBProvider config={idbConfig} loading="Loading..." fallback="Unsupported">
     <Example />
   </IndexedDBProvider>
 );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-indexeddb",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Lightweight (1KB gzipped) hooks w/ promises for easy IndexedDB access in React ⚓",
   "author": "Harsh Zalavadiya",
   "module": "dist/use-indexeddb.esm.js",
@@ -20,8 +20,8 @@
     "build": "tsdx build && filesize",
     "lint": "tsdx lint",
     "prepare": "tsdx build && filesize",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
+    "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook"
   },
   "peerDependencies": {
     "react": ">=17"
@@ -34,23 +34,23 @@
   },
   "devDependencies": {
     "@ampproject/filesize": "^4.3.0",
-    "@babel/core": "^7.15.5",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-essentials": "^6.3.8",
-    "@storybook/addon-links": "^6.3.8",
-    "@storybook/react": "^6.3.8",
-    "@types/react": "^17.0.24",
-    "@types/react-dom": "^17.0.9",
-    "babel-loader": "^8.2.2",
-    "husky": "^7.0.2",
-    "react": "^17.0.2",
+    "@babel/core": "^7.19.0",
+    "@storybook/addon-actions": "^6.5.11",
+    "@storybook/addon-essentials": "^6.5.11",
+    "@storybook/addon-links": "^6.5.11",
+    "@storybook/react": "^6.5.11",
+    "@types/react": "^18.0.19",
+    "@types/react-dom": "^18.0.6",
+    "babel-loader": "^8.2.5",
+    "husky": "^8.0.1",
+    "react": "^18.2.0",
     "react-docgen-typescript-loader": "^3.7.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
-    "ts-loader": "^9.2.6",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "ts-loader": "^9.3.1",
     "tsdx": "^0.14.1",
-    "tslib": "^2.3.1",
-    "typescript": "^4.4.3"
+    "tslib": "^2.4.0",
+    "typescript": "^4.8.3"
   },
   "filesize": {
     "track": [
@@ -60,6 +60,6 @@
   "dependencies": {
     "@storybook/addon-knobs": "^6.3.1",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-storysource": "^6.3.8"
+    "@storybook/addon-storysource": "^6.5.11"
   }
 }

src/index.tsx

@@ -7,29 +7,40 @@ interface UseIndexedDBProps {
   config: IndexedDBConfig;
   children?;
   loading?;
+  fallback?;
   actions?: typeof getActions;
 }
 
-const ObservationCreateContext = createContext<UseIndexedDBProps>({} as UseIndexedDBProps);
+const IndexedDBContext = createContext<UseIndexedDBProps>({} as UseIndexedDBProps);
 
 const IndexedDBProvider = (props: UseIndexedDBProps) => {
-  const [isInitialized, setIsInitialized] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(0);
 
   useEffect(() => {
-    getConnection(props.config).then(() => setIsInitialized(true));
+    getConnection(props.config)
+      .then(() => setIsInitialized(1))
+      .catch(() => setIsInitialized(2));
   }, []);
 
-  return isInitialized ? (
-    <ObservationCreateContext.Provider value={{ config: props.config, actions: getActions }}>
-      {props.children}
-    </ObservationCreateContext.Provider>
-  ) : (
-    props.loading || null
-  );
+  switch (isInitialized) {
+    case 1:
+      return (
+        <IndexedDBContext.Provider value={{ config: props.config, actions: getActions }}>
+          {props.children}
+        </IndexedDBContext.Provider>
+      );
+
+    case 2:
+      console.warn("Not Supported");
+      return props.fallback || null;
+
+    default:
+      return props.loading || null;
+  }
 };
 
 export function useIndexedDBStore<T>(storeName: string) {
-  const ctx = useContext(ObservationCreateContext);
+  const ctx = useContext(IndexedDBContext);
   return ctx.actions<T>(storeName, ctx.config);
 }
 

stories/idb.stories.tsx

@@ -20,7 +20,7 @@ const idbConfig: IndexedDBConfig = {
 };
 
 export const Page = () => (
-  <IndexedDBProvider config={idbConfig} loading="Loading...">
+  <IndexedDBProvider config={idbConfig} loading="Loading..." fallback="Not Supported">
     <IDBOperations />
   </IndexedDBProvider>
 );