{"id":13805478,"url":"https://github.com/buildo/react-cookie-banner","last_synced_at":"2025-05-13T19:31:04.277Z","repository":{"id":33662222,"uuid":"37314811","full_name":"buildo/react-cookie-banner","owner":"buildo","description":"React Cookie banner which can be automatically dismissed with a scroll. Because fuck The Cookie Law, that's why.","archived":true,"fork":false,"pushed_at":"2019-12-11T02:51:55.000Z","size":274,"stargazers_count":182,"open_issues_count":12,"forks_count":19,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-01T04:37:48.729Z","etag":null,"topics":["react"],"latest_commit_sha":null,"homepage":"http://react-components.buildo.io/#cookiebanner","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/buildo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-12T09:54:55.000Z","updated_at":"2024-03-01T12:09:32.000Z","dependencies_parsed_at":"2022-09-05T17:00:31.176Z","dependency_job_id":null,"html_url":"https://github.com/buildo/react-cookie-banner","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildo%2Freact-cookie-banner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildo%2Freact-cookie-banner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildo%2Freact-cookie-banner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buildo%2Freact-cookie-banner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/buildo","download_url":"https://codeload.github.com/buildo/react-cookie-banner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254012967,"owners_count":21999346,"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":["react"],"created_at":"2024-08-04T01:01:01.571Z","updated_at":"2025-05-13T19:31:04.001Z","avatar_url":"https://github.com/buildo.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","📦 Legacy \u0026 Inactive Projects","Consent Management"],"sub_categories":[],"readme":"[![Build Status](https://drone.our.buildo.io/api/badges/buildo/react-cookie-banner/status.svg)](https://drone.our.buildo.io/buildo/react-cookie-banner) ![](https://img.shields.io/npm/v/react-cookie-banner.svg)\n\n# React Cookie Banner\n\nA cookie banner for React that can be dismissed with a simple scroll. Because [fuck the Cookie Law](http://nocookielaw.com/) that's why.\n\n(If you *really* want to annoy your users you can disable this feature but this is strongly discouraged!).\n\n```jsx\nimport CookieBanner from 'react-cookie-banner';\n\nReact.renderComponent(\n  \u003cdiv\u003e\n    \u003cCookieBanner\n      message=\"Yes, we use cookies. If you don't like it change website, we won't miss you!\"\n      onAccept={() =\u003e {}}\n      cookie=\"user-has-accepted-cookies\" /\u003e\n  \u003c/div\u003e,\n  document.body\n);\n```\n\n[Live Examples](http://react-components.buildo.io/#cookiebanner)\n\n## Install\n```\nnpm install --save react-cookie-banner\n```\n\nor using `yarn`:\n\n```\nyarn add react-cookie-banner\n```\n\n## API\nYou can see `CookieBanner`'s props in its own [README.md](https://github.com/buildo/react-cookie-banner/blob/master/src/README.md)\n\n## Style\n`react-cookie-banner` comes with a nice default style made using inline-style.\n\nOf course, you can customize it as you like in several ways.\n\nBased on how many changes you want to apply, you can style `react-cookie-banner` as follows:\n\n### You like the original style and you wish to make only a few modifications\nWhy spending hours on the CSS when you have such a nice default style? :)\n\nIn this case you can:\n\n#### 1) Override the predefined inline-styles\nIn this example we change the message font-size and make the banner slightly transparent with the `styles` prop:\n\n```jsx\n\u003cCookieBanner\n  styles={{\n    banner: { backgroundColor: 'rgba(60, 60, 60, 0.8)' },\n    message: { fontWeight: 400 }\n  }}\n  message='...'\n/\u003e\n```\n\nSee [`src/styleUtils.ts`](https://github.com/buildo/react-cookie-banner/blob/master/src/styleUtils.ts) for a complete list of overridable style objects.\n\n#### 2) Beat it with good old CSS (or SASS)\n\nThe banner is structured as follows:\n\n```jsx\n\u003cdiv className={this.props.className + ' react-cookie-banner'}\n  \u003cspan className='cookie-message'\u003e\n    {this.props.message}\n    \u003ca className='cookie-link'\u003e\n      Learn more\n    \u003c/a\u003e\n  \u003c/span\u003e\n  \u003cbutton className='button-close'\u003e\n    Got it\n  \u003c/button\u003e\n\u003c/div\u003e\n```\n\nYou can style every part of it using the appropriate `className`:\n\n```sass\n.your-class-name.react-cookie-banner {\n  background-color: rgba(60, 60, 60, 0.8);\n\n  .cookie-message {\n    font-weight: 400;\n  }\n}\n```\n\n### You need to heavily adapt the style to your application\nYour creative designer wants to change the style of the cookie banner completely?\nDon't worry, we got your covered!\n\nIf you need to re-style it, you can:\n\n#### 1) Disable the default style and use your CSS\n\nYou may disable the default style by simply setting the prop `disableStyle` to `true`:\n\n```jsx\n\u003cCookieBanner disableStyle={true} /\u003e\n```\n\nNow you can re-style the cookie banner completely using your own CSS.\n\n#### 2) Use your own cookie banner!\nDon't like the layout either?\nYou can use your own custom cookie banner component by passing it as `children` and still let `react-cookie-banner` handle the hassle of managing `cookies` for you :)\n\n```jsx\n\u003cCookieBanner\u003e\n  {(onAccept) =\u003e (\n    \u003cMyCustomCookieBanner {...myCustomProps} onAccept={onAccept} /\u003e {/* rendered directly without any \u003cdiv\u003e wrapper */}\n  )}\n\u003c/CookieBanner\u003e\n```\n\n## Cookies manipulation\n`react-cookie-banner` uses **`universal-cookie`** to manipulate cookies.\n\nYou can import the `Cookies` class and use it as follows:\n\n```js\nimport { Cookies } from 'react-cookie-banner'\n\nconst cookies = new Cookies(/* Your cookie header, on browsers defaults to document.cookie */)\n\n// simple set\ncookie.set('test', 'a')\n// complex set - cookie(name, value, ttl, path, domain, secure)\ncookie.set('test', 'a', {\n  expires: new Date(2020-05-04)\n  path: '/api',\n  domain: '*.example.com',\n  secure: true\n})\n// get\ncookies.get('test')\n// destroy\ncookies.remove('test', '', -1)\n```\n\nPlease refer to [universal-cookie](https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie#api---cookies-class) repo for more documentation.\n\n## Server side rendering (aka Universal)\n`react-cookie-banner` supports SSR thanks to `react-cookie`.\nIf you want to support SSR, you should use the `CookieProvider` from `react-cookie` and the `CookieBannerUniversal` wrapper:\n\n```jsx\nimport { Cookies, CookiesProvider, CookieBannerUniversal } from 'react-cookie-banner'\n\nconst cookies = new Cookies(/* Your cookie header, on browsers defaults to document.cookie */)\n\n\u003cCookiesProvider cookies={cookies}\u003e\n  \u003cCookieBannerUniversal /\u003e\n\u003c/CookiesProvider\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuildo%2Freact-cookie-banner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuildo%2Freact-cookie-banner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuildo%2Freact-cookie-banner/lists"}