add stores props in LocationStateProvider

packages/location-state-core/src/provider.tsx

@@ -1,29 +1,38 @@
 import { LocationStateContext } from "./context";
 import { StorageStore, Store, URLStore } from "./stores";
 import { NavigationSyncer } from "./syncers";
-
 import { Syncer } from "./types";
 import { ReactNode, useEffect, useState } from "react";
 
+type Stores = Record<string, Store>;
+type CreateStores = (syncer: Syncer) => Stores;
+
+const createDefaultStores: CreateStores = (syncer) => ({
+  session: new StorageStore(globalThis.sessionStorage),
+  url: new URLStore(syncer),
+});
+
 export function LocationStateProvider({
   children,
   ...props
 }: {
   syncer?: Syncer;
+  stores?: Stores | CreateStores;
   children: ReactNode;
 }) {
   const [syncer] = useState(
     () => props.syncer ?? new NavigationSyncer(window.navigation),
   );
-  const [contextValue] = useState(() => ({
-    stores: {
-      session: new StorageStore(globalThis.sessionStorage),
-      url: new URLStore(syncer),
-    },
-  }));
+  const [stores] = useState(() => {
+    if (props.stores) {
+      return typeof props.stores === "function"
+        ? props.stores(syncer)
+        : props.stores;
+    }
+    return createDefaultStores(syncer);
+  });
 
   useEffect(() => {
-    const stores = contextValue.stores;
     const abortController = new AbortController();
     const { signal } = abortController;
     const applyAllStore = (callback: (store: Store) => void) => {
@@ -51,10 +60,10 @@ export function LocationStateProvider({
     );
 
     return () => abortController.abort();
-  }, [syncer, contextValue.stores]);
+  }, [syncer, stores]);
 
   return (
-    <LocationStateContext.Provider value={contextValue}>
+    <LocationStateContext.Provider value={{ stores }}>
       {children}
     </LocationStateContext.Provider>
   );