{"id":13515403,"url":"https://github.com/use-cookie-consent/use-cookie-consent-react","last_synced_at":"2025-03-31T04:37:01.665Z","repository":{"id":40419026,"uuid":"412843959","full_name":"use-cookie-consent/use-cookie-consent-react","owner":"use-cookie-consent","description":"Tiny (\u003c2kB) useCookieConsent hook for React apps","archived":false,"fork":false,"pushed_at":"2023-03-18T21:14:14.000Z","size":816,"stargazers_count":30,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-24T23:01:38.723Z","etag":null,"topics":["cookie","cookies","gdpr","hook","react","reactjs"],"latest_commit_sha":null,"homepage":"https://use-cookie-consent.js.org/packages/react","language":"JavaScript","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/use-cookie-consent.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["bring-shrubbery"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2021-10-02T16:01:32.000Z","updated_at":"2025-03-17T10:37:20.000Z","dependencies_parsed_at":"2024-01-13T19:25:16.669Z","dependency_job_id":"7cac1029-13d4-4596-ae6b-3a60254a8399","html_url":"https://github.com/use-cookie-consent/use-cookie-consent-react","commit_stats":{"total_commits":37,"total_committers":2,"mean_commits":18.5,"dds":"0.027027027027026973","last_synced_commit":"f076dde3260d8cce1aebd05660bf15d7f596bd36"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/use-cookie-consent%2Fuse-cookie-consent-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/use-cookie-consent%2Fuse-cookie-consent-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/use-cookie-consent%2Fuse-cookie-consent-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/use-cookie-consent%2Fuse-cookie-consent-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/use-cookie-consent","download_url":"https://codeload.github.com/use-cookie-consent/use-cookie-consent-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246418657,"owners_count":20773934,"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":["cookie","cookies","gdpr","hook","react","reactjs"],"created_at":"2024-08-01T05:01:10.832Z","updated_at":"2025-03-31T04:36:59.692Z","avatar_url":"https://github.com/use-cookie-consent.png","language":"JavaScript","funding_links":["https://github.com/sponsors/bring-shrubbery","https://www.buymeacoffee.com/bring.shrubbery"],"categories":["JavaScript"],"sub_categories":[],"readme":"# useCookieConsent hook for React.js\n\n[![Build](https://img.shields.io/github/checks-status/use-cookie-consent/use-cookie-consent-react/main)](https://github.com/use-cookie-consent/use-cookie-consent-react/actions)\n[![NPM Version](https://img.shields.io/npm/v/@use-cookie-consent/react)](https://www.npmjs.com/package/@use-cookie-consent/react)\n[![NPM Downloads](https://img.shields.io/npm/dm/@use-cookie-consent/react)](https://www.npmjs.com/package/@use-cookie-consent/react)\n[![Codecov](https://img.shields.io/codecov/c/github/use-cookie-consent/use-cookie-consent-react)](https://github.com/use-cookie-consent/use-cookie-consent-react/actions/workflows/codecov.yml)\n[![gzipped size](https://img.badgesize.io/https:/unpkg.com/@use-cookie-consent/react@latest/build/index.es.js?label=gzipped\u0026compression=gzip\u0026style=flat-square)](https://unpkg.com/@use-cookie-consent/react@latest/build/index.es.js)\n[![License](https://img.shields.io/npm/l/@use-cookie-consent/react)](https://github.com/use-cookie-consent/use-cookie-consent-react/blob/main/LICENSE)\n\n[![\"Buy Me A Coffee\"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/bring.shrubbery)\n\n\u003e Headless state management for GDPR cookie consent\n\n- **Headless** - bring your own styles, we will provide the logic.\n- **Hook-based** - extremely intuitive for React developers.\n- **React Context support** - wrap your app in a provider and synchronse UI updates across the app.\n- **Tiny** - less than `2kB` gzipped.\n\n## Description\n\nThis package provides a wrapper around [`@use-cookie-consent/core`](https://github.com/use-cookie-consent/use-cookie-consent-core) package to provide best experience for React applications. Namely, it provides a React context, which provides all the functionality of [core](https://github.com/use-cookie-consent/use-cookie-consent-core) package but with reactive updates.\n\n## Installation\n\n```bash\nnpm install @use-cookie-consent/react\n```\n\nor\n\n```bash\nyarn add @use-cookie-consent/react\n```\n\n## Usage\n\n### Basic usage\n\nThe first step to this setup is to wrap your app in the `CookieConsentProvider`:\n\n```jsx\nimport { CookieConsentProvider } from '@use-cookie-consent/react'\n\nexport default function App() {\n  return {\n    \u003cCookieConsentProvider\u003e\n      ...\n    \u003c/CookieConsentProvider\u003e\n  }\n}\n```\n\nThen you can read and update the cookie consent data from any component which is inside of the `\u003cCookieConsentProvider\u003e`. Both components you see below are not connected to each other in any way except the `useCookieConsentContext` function. You would put both of them separately somewhere in your app WITHOUT connecting them by any callbacks or passing state through props.\n\n```jsx\n// This component is an example of a component that you use to\n// accept/decline cookie consent, without reading any data.\nconst CookieBanner = () =\u003e {\n  const { acceptAllCookies, declineAllCookies, acceptCookies } =\n    useCookieConsentContext();\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={acceptAllCookies}\u003eAccept all\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e acceptCookies({ thirdParty: true })}\u003e\n        Accept third-party\n      \u003c/button\u003e\n      \u003cbutton onClick={() =\u003e acceptCookies({ firstParty: true })}\u003e\n        Accept first-party\n      \u003c/button\u003e\n      \u003cbutton onClick={declineAllCookies}\u003eReject all\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n```jsx\n// This component is an example of a component which would show\n// the state of the cookie consent, without updating anything.\nconst CookiesPreview = () =\u003e {\n  const { consent } = useCookieConsentContext();\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003e\n        {`Third-party cookies ${consent.thirdParty ? 'approved' : 'rejected'}`}\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        {`First-party cookies ${consent.firstParty ? 'approved' : 'rejected'}`}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nThanks to [@pixelass](https://github.com/pixelass) for prividing the examples you see above.\n\n## Contributors\n\n- [Antoni Silvestrovic](https://github.com/bring-shrubbery)\n- [Gregor Adams](https://github.com/pixelass)\n\n## Discussions and Questions\n\nFor non-issues please consider joining our Discord [here](https://discord.gg/pa8epvzJbb)!\n\n## License\n\n[MIT](https://github.com/use-cookie-consent/use-cookie-consent-react/blob/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuse-cookie-consent%2Fuse-cookie-consent-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuse-cookie-consent%2Fuse-cookie-consent-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuse-cookie-consent%2Fuse-cookie-consent-react/lists"}