{"id":20494330,"url":"https://github.com/voltra/react-gdpr-guard","last_synced_at":"2026-01-22T08:33:21.637Z","repository":{"id":57688532,"uuid":"276080490","full_name":"Voltra/react-gdpr-guard","owner":"Voltra","description":"Official React binding for gdpr-guard","archived":false,"fork":false,"pushed_at":"2024-07-06T14:27:53.000Z","size":1022,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-16T05:11:52.291Z","etag":null,"topics":["gdpr","gdpr-guard","hacktoberfest","react","react-library"],"latest_commit_sha":null,"homepage":"https://voltra.github.io/react-gdpr-guard","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Voltra.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-30T11:31:55.000Z","updated_at":"2025-02-19T00:15:11.000Z","dependencies_parsed_at":"2022-08-25T15:40:42.357Z","dependency_job_id":"12fe01f5-378e-41f2-802d-6d7de9670a02","html_url":"https://github.com/Voltra/react-gdpr-guard","commit_stats":{"total_commits":29,"total_committers":2,"mean_commits":14.5,"dds":0.03448275862068961,"last_synced_commit":"0710a9c862012b1fbd2da431451199db133eccb1"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Voltra%2Freact-gdpr-guard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Voltra%2Freact-gdpr-guard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Voltra%2Freact-gdpr-guard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Voltra%2Freact-gdpr-guard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Voltra","download_url":"https://codeload.github.com/Voltra/react-gdpr-guard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250451033,"owners_count":21432755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gdpr","gdpr-guard","hacktoberfest","react","react-library"],"created_at":"2024-11-15T17:39:08.178Z","updated_at":"2026-01-22T08:33:21.610Z","avatar_url":"https://github.com/Voltra.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-gdpr-guard\n\n\u003ccenter\u003e\u003cimg src=\"https://github.com/Voltra/react-gdpr-guard/blob/master/react-gdpr-guard.png\" alt=\"Logo\" width=\"250\"/\u003e\u003c/center\u003e\n\n\n\u003e Official React binding for gdpr-guard\n\n`react-gdpr-guard` acts like a meta-hook library: it exposes a single hook that you can use outside of your React app\nto create hooks that you will later use in that react app.\n\n[Here's a demo](https://codesandbox.io/s/react-gdpr-guard-demo-pkefzs?file=/src/App.js)\n\n## Before using the library\n\nYou must know about the `gdpr-guard` library and how it works.\n\nHere are a few links to get up to speed:\n* [Github Repo](https://github.com/Voltra/gdpr-guard)\n* [NPM Package](https://www.npmjs.com/package/gdpr-guard)\n* [Docs](https://voltra.github.io//gdpr-guard/)\n\n## Setup the library\n\nIn a separate file, let's say a `hooks/gdpr.js` for instance, you can create your hooks alongside your `GdprSavior` and manager factory:\n\n```javascript\n// src/hooks/gdpr.js\n\nconst managerFactory = () =\u003e {\n\treturn GdprManagerBuilder.make()\n\t\t/* [...] */\n\t\t.build();\n};\nconst savior = new MyGdprSavior();\n\nexport const {\n\tuseSetupGdprEffect,\n\tuseAttachGdprListenersEffect,\n\tuseGdprManager,\n\tuseGdprSavior,\n\tuseGdpr,\n\tuseGdprComputed,\n\tuseGdprGuard,\n\tuseGdprGuardEnabledState,\n} = createGdprGuardHooks(savior, managerFactory);\n```\n\nThen, in your main component, you can attach the setup hook and the listeners hook:\n\n```javascript\n// src/App.jsx\n\nimport {\n\tuseSetupGdprEffect,\n\tuseAttachGdprListenersEffect,\n\tuseGdpr,\n} from \"./hooks/gdpr.js\";\n\nimport MyGdprBanner from \"./components/MyGdprBanner\";\nimport MyGdprSettingsOpener from \"./components/MyGdprSettingsOpener\";\n\nexport default function App() {\n\tconst {\n\t\tbannerWasShown,\n\t\tcloseGdprBanner,\n\t\tresetAndShowBanner,\n\t} = useGdpr();\n\n\t// Bootstrap the library\n\tuseSetupGdprEffect();\n\n\t// Attach events\n\tuseAttachGdprListenersEffect(eventHub =\u003e {\n\t\teventHub.onEnable(\"_ga\", () =\u003e {\n\t\t\t// Load all Analytics scripts here\n\t\t});\n\n\t\teventHub.onDisable(\"myIntrusive3rdPartyStuff\", () =\u003e {\n\t\t\t// Disable everything from the intrusive 3rd-party lib\n\t\t});\n\t});\n\n\t// The rest of your component logic\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cMyGdprSettingsOpener onClick={resetAndShowBanner}/\u003e\n\t\t\t{!bannerWasShown \u0026\u0026 \u003cMyGdprBanner onClose={closeGdprBanner} /\u003e}\n\t\t\t{/* The rest of your component's UI */}\n\t\t\u003c/\u003e\n\t);\n}\n```\n\n## UI/UX component recommendations\n\nDefault values must be chosen carefully and with the user's experience in mind.\nFor instance: if geolocation is optional, disable it by default.\n\nAfter the user changes their settings, saving them using the Savior API is recommended.\n\n### GDPR settings opener\n\nA tiny button or link that, when clicked, calls the `resetAndShowBanner` so that the GDPR settings UI may be opened again.\n\n### GDPR banner\n\nA banner, a modal or whatever prevents users from using your website without first interacting with it.\n\nIt should display at the very least 4 buttons:\n* \"Accept all\" which calls `enableManager` and then `closeBanner`\n* \"Deny all\" which calls `disableManager` and then `closeBanner`\n* \"Accept current settings\" which just calls `closeBanner`\n* \"Modify settings\" which opens your GDPR settings UI\n\n### GDPR settings\n\nGenerally a modal (but can be whatever) in which the user has access to the following:\n* A switch/checkbox to toggle the whole manager using `toggleManager`\n* A link/button to accept all and thus call `enableManager` and then `closeBanner`\n* A link/button to deny all and thus call `disableManager` and then `closeBanner`\n* A list/tree of groups and guards with ways to toggle them individually\n* A button to cancel the modification of settings (which just closes the settings' UI and goes back to the banner)\n* A button to save the modifications and thus call `closeBanner`\n\n## The hooks\n\n### createGdprGuardHooks(gdprSavior, gdprManagerFactory)\n\nThe meta-hook that creates hooks, based on your manager and savior, that you can use throughout your app.\n\n### useSetupGdprEffect()\n\n`useSetupGdprEffect` is a simple hook that just bootstrap the whole library's core logic.\nAs such, you must use it (preferably only in one place) within your app. To keep things simple\nand organized, you might want to call it within your `App` component.\n\n### useGdprComputed(factory, deps = [])\n\nIt behaves exactly like `useMemo` but recomputes its value upon changes within the GDPR manager.\n\n### useGdprSavior()\n\nGives you direct access to the wrapper around the `GdprSavior` instance you provided. This may not be needed, but is\nuseful if you need to tap into the lifecycle of your GDPR manager.\n\n### useGdprManager()\n\nGives you direct access to the wrapper around the `GdprManager` instance that is restored using the provided `GdprSavior`.\nIt allows you to query and mutate your manager's state directly even though there are different hooks for that exact purpose.\n\n### useAttachGdprListenersEffect(callback)\n\nIt allows you to attach events listeners to your manager's `GdprManagerEventHub`.\nThis is where you'll listen for enable/disable events on particular guards.\n\n### useGdprGuardEnabledState(guardName, useBannerStatus = false)\n\nIt allows you to query the enabled state of the guard that has the given `guardName`.\nIf `useBannerStatus`, and for the enable state to be true, the banner would have to have been shown to the user.\n\n### useGdprGuard(guardName)\n\nIt allows you to control a single guard and access its data:\n\n```javascript\nconst {\n\tguard, // instance of GdprGuardRaw\n\tenableGuard, // callback to enable that guard\n\tdisableGuard, // callback to disable that guard\n\ttoggleGuard, // callback to toggle that guard\n} = useGdprGuard(\"My guard's name\");\n```\n\nNote that this also applies to `GdprGroup`s since they are also `GdprGuard`s.\n\n### useGdpr()\n\nIt allows you to do and access a lot of things at once, so let's detail those:\n\n```javascript\nconst {\n\tbannerWasShown,\n\tmanager,\n\tcloseGdprBanner,\n\tresetAndShowBanner,\n\tenableManager,\n\tdisableManager,\n\ttoggleManager,\n\tenableGuard,\n\tdisableGuard,\n\ttoggleGuard,\n\tguardIsEnabled,\n\tenableForStorage,\n\tdisableForStorage,\n\ttoggleForStorage,\n} = useGdpr();\n```\n\n#### bannerWasShown\n\nDirect access to whether the GDPR banner has been shown or not (useful for conditional rendering of the banner itself).\n\n#### manager\n\nDirect access to the current state of the manager as a `GdprManagerRaw` instance.\nUseful to manually query the state or help build the UI.\n\n#### closeGdprBanner()\n\nWhen called will close the GDPR banner and call the appropriate event listeners.\n\n#### resetAndShowBanner()\n\nWhen called will reset the shown status of the GDPR banner.\n\n#### enableManager()\n\nWhen called will enable every guard within the manager (except required ones).\nUseful for the \"Accept All\" button of the GDPR banner.\n\n#### disableManager()\n\nWhen called will disable every guard within the manager (except required ones).\nUseful for the \"Reject All\" button of the GDPR banner.\n\n#### toggleManager()\n\nToggle the enabled/disabled state of the manager and sets every guard to that state.\nUseful to have a global switch on the GDPR settings UI.\n\n#### enableGuard(guardName)\n\nEnable the guard that has the given name.\nAlso works for groups of guards.\nCan be useful when building the GDPR settings UI.\n\n#### disableGuard(guardName)\n\nDisable the guard that has the given name.\nAlso works for groups of guards.\nCan be useful when building the GDPR settings UI.\n\n#### toggleGuard(guardName)\n\nToggle the guard that has the given name.\nAlso works for groups of guards.\nCan be useful when building the GDPR settings UI.\n\n#### guardIsEnabled(guardName, useBannerStatus = false)\n\nQuery the enabled state of the given guard. When using the banner status,\nthe guard can only be considered if the banner has already been shown.\n\n#### enableForStorage(storage)\n\nEnable guards that are stored in the given `GdprStorage`.\nCan be useful when building the GDPR settings UI.\n\n#### disableForStorage(storage)\n\nDisable guards that are stored in the given `GdprStorage`.\nCan be useful when building the GDPR settings UI.\n\n#### toggleForStorage(storage)\n\nToggle guards that are stored in the given `GdprStorage`.\nCan be useful when building the GDPR settings UI.\n\n## CHANGELOG\n\n### v1.0.2\n\nAdd manager hotswap on boot\n\n### v1.0.1 ***(broken do not use)***\n\nFix library build\n\n### v1.0.0 ***(broken do not use)***\n\nInitial release\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoltra%2Freact-gdpr-guard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvoltra%2Freact-gdpr-guard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoltra%2Freact-gdpr-guard/lists"}