Add custom hash property (#23)

README.md

@@ -65,6 +65,7 @@ import { ConsentProvider } from 'react-hook-consent';
                 mandatory: true,
             },
         ],
+        // customHash: 'my-custom-hash', // optional, e.g. when changing the options based on language
         theme: 'light',
     }}
 >
@@ -75,10 +76,11 @@ import { ConsentProvider } from 'react-hook-consent';
 
 #### Options Prop
 
-| Name     | Type                    | Required | Description                                     | Default |
-| -------- | ----------------------- | -------- | ----------------------------------------------- | ------- |
-| services | ConsentOptionsService[] | yes      | The configuration of the services to be covered |         |
-| theme    | Theme                   |          | Configuration of light or dark theme            | dark    |
+| Name       | Type                    | Required | Description                                          | Default |
+| ---------- | ----------------------- | -------- | ---------------------------------------------------- | ------- |
+| services   | ConsentOptionsService[] | yes      | The configuration of the services to be covered      |         |
+| customHash | string                  |          | A custom hash to detect if options have been updated |         |
+| theme      | Theme                   |          | Configuration of light or dark theme                 | dark    |
 
 The `services` array can be configured as follows:
 

examples/next-v13/pages/_app.tsx

@@ -28,6 +28,7 @@ const consentOptions: ConsentOptions = {
             mandatory: true,
         },
     ],
+    // customHash: 'my-custom-hash',
 };
 
 export default function App({ Component, pageProps }: AppProps) {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-hook-consent",
-    "version": "3.3.0",
+    "version": "3.4.0",
     "description": "React consent management solution and banner for cookies and (external) scripts.",
     "scripts": {
         "build": "node esbuild.config.mjs production",

src/Context.tsx

@@ -16,6 +16,7 @@ export type ConsentOptionsService = {
 
 export type ConsentOptions = {
     services: ConsentOptionsService[];
+    customHash?: string;
     theme?: Theme;
 };
 

src/core/local-storage/get.ts

@@ -13,10 +13,9 @@ export function getFromLocalStorage(hash: string) {
     const { consent, hash: storedHash } = JSON.parse(item) as StoredState;
 
     let isBannerVisible = false;
-    let isDetailsVisible = false;
     if (storedHash !== hash) {
         isBannerVisible = true;
     }
 
-    return { consent: consent && consent.length > 0 ? consent : [], isBannerVisible, isDetailsVisible };
+    return { consent: consent && consent.length > 0 ? consent : [], isBannerVisible, isDetailsVisible: false };
 }

src/useConsentState.tsx

@@ -13,7 +13,7 @@ export function useConsentState(options: ConsentOptions) {
         consent: [],
         isBannerVisible: false,
         isDetailsVisible: false,
-        hash: hash(options),
+        hash: options.customHash ?? hash(options),
     });
 
     useEffect(() => {