{"id":16579528,"url":"https://github.com/schlomoh/cookieconsent","last_synced_at":"2025-03-16T20:31:38.280Z","repository":{"id":42128357,"uuid":"474409135","full_name":"Schlomoh/cookieConsent","owner":"Schlomoh","description":"This cookie consent react component aims to provide a fully customizable banner or modal to be displayed once your site is visited","archived":true,"fork":false,"pushed_at":"2024-07-10T11:20:34.000Z","size":1005,"stargazers_count":13,"open_issues_count":2,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-27T13:38:45.309Z","etag":null,"topics":["consent-modal","cookie-banner","cookie-consent","cookie-modal","customizable","react","react-component","react-cookies","react-library","typescript","typescript-library"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@schlomoh/react-cookieconsent","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Schlomoh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-03-26T16:50:05.000Z","updated_at":"2025-02-26T17:41:17.000Z","dependencies_parsed_at":"2024-07-10T13:11:54.155Z","dependency_job_id":"52b5fef9-2441-41fd-81a1-95543d940466","html_url":"https://github.com/Schlomoh/cookieConsent","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Schlomoh%2FcookieConsent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Schlomoh%2FcookieConsent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Schlomoh%2FcookieConsent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Schlomoh%2FcookieConsent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Schlomoh","download_url":"https://codeload.github.com/Schlomoh/cookieConsent/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243830922,"owners_count":20354850,"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":["consent-modal","cookie-banner","cookie-consent","cookie-modal","customizable","react","react-component","react-cookies","react-library","typescript","typescript-library"],"created_at":"2024-10-11T22:18:17.846Z","updated_at":"2025-03-16T20:31:37.746Z","avatar_url":"https://github.com/Schlomoh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# React-cookieConsent\n\nThis react cookie consent library provides you with a fully customizable banner or modal\n\n\n[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)\n![Downloads](https://img.shields.io/npm/v/@schlomoh/react-cookieconsent)\n\n## Installation 🧑🏽‍💻\n\nInstall the component library using:\n\n```zsh\n  npm install @schlomoh/react-cookieconsent\n```\nor\n\n```zsh\n  yarn add @schlomoh/react-cookieconsent\n```\n\nYou'll also need to install styled-components\n\n```zsh\n  npm install styled-components\n```\n```zsh\n  yarn add styled-components\n```\n\n## Features ✨\n\n- Two seperate components (modal and banner)\n- Fully customizable via css\n- Define custom text to inform the user\n- Pass in callbacks for denial and acception\n- Enable or disable cookie preferences\n\n\n## Preview 👀\n\n Default cookie banner\n\n![example](https://github.com/schlomoh/cookieConsent/blob/main/doc-assets/cookieBanner.jpg?raw=true)\n\nDefault cookie Modal\n\n![example](https://github.com/schlomoh/cookieConsent/blob/main/doc-assets/cookieModal.jpg?raw=true)\n\n## Usage / Examples ✏️\n\nYou can either use the components right out of the box without setting any properties or completely customize either one of the consent components in your own taste.  \n\n### Cookie modal 💚\n#### Basic\n```jsx\nimport { CookieBanner } from '@schlomoh/react-cookieConsent'\n\nconst MyApp = () =\u003e (\n    \u003c\u003e\n        \u003cCookieBanner \u003e // above the rest of the page\n        \u003cMyPage /\u003e\n    \u003c/\u003e\n)\n```\n### Cookie banner 💙\n#### Basic\n\n```jsx\nimport { CookieModal } from '@schlomoh/react-cookieConsent'\n\nconst MyApp = () =\u003e (\n    \u003c\u003e\n        \u003cCookieModal \u003e // above the rest of the page\n        \u003cMyPage /\u003e\n    \u003c/\u003e\n)\n```\n#### Customized 📐\n\n*(All properties work for both modal and banner)*\n\n```jsx\n...\n\nconst Content = () =\u003e (\n    \u003c\u003e\n        \u003ch3\u003eI'm using cookies on my site.\u003c/h3\u003e\n        \u003cp\u003eBla Bla Bla this is my own informational text.\u003c/p\u003e\n    \u003c/\u003e\n)\n\nconst containerStyle = {backgroundColor: '#333'};\nconst buttonStyle = {borderRadius: 0}\nconst primaryButtonStyle={...buttonStyle, backgroundColoe:'red'}\nconst secondaryButtonStyle={...buttonStyle, backgroundColoe:'blue'}\n\nconst MyApp = () =\u003e (\n    \u003c\u003e\n        \u003cCookieBanner \n            acceptButtonText='I want it'\n            declineButtonText='Go away'\n            headingColor='white'\n            paragraphColor='grey'\n            containerStyle={containerStyle}\n            primaryButtonStyle={primaryButtonStyle}\n            secondaryButtonStyle={secondaryButtonStyle}\n            infoContent={\u003cContent /\u003e}\n        /\u003e\n        \u003cMyPage /\u003e\n    \u003c/\u003e\n)\n\n```\n\n... it then looks like this (*dont mind the text👀 earlier screenshot*): \n\n![example](https://github.com/schlomoh/cookieConsent/blob/main/doc-assets/customBanner.jpg?raw=true)\n\n### Enabling cookie preferences 🔧\n\nTo let a visitor select their cookie preferences the property `enableManagement` has to be set to `true`.\n\nYou can then set an array of cookie categories which the user can select from. There is always the category \"Necessary\" predefined and set to `true` and `disabled` by default.\n\nWhen `enableManagement` is set you can also override the default text of the button by setting `managementButtonText='whatever'`. This button is a secondary button.\n\nFor example\n```jsx\n\u003c\u003e\n    \u003cCookieBanner\n        enableManagement\n        managementButtonText='manage cookie preferences'\n        cookieCategories={['analytics', 'advertisement']}\n    /\u003e\n\u003c/\u003e\n```\n\n\u003cbr\u003e\n\n![example](https://github.com/schlomoh/cookieConsent/blob/main/doc-assets/managementView.jpg?raw=true)\n\n\n\n\n### Callbacks 👉🏼\n\nYou can define callbacks which are called on either accept or decline. Simply pass a function into the ```onAccept``` or ```onDecline``` property which is executed accordingly.\n\nThe `onAccept` event can pass an object with the selected cookies as `ICookieObject` into your accept callback. \n\n```jsx\nconst onAccept = (cookies : ICookieObject) =\u003e {\n    console.log(cookies);\n};\n\nconst onDecline = () =\u003e {\n    console.log('declined');\n}\n\n\n// inside your app\nconst MyApp = () =\u003e (\n    \u003c\u003e\n        \u003cCookieBanner\n        onAccept={onAccept} \n        onDecline={onDecline}\n        /\u003e\n    \u003c\u003e\n)\n```\n\n## Reference 🔎\n\nThe `ICookieObject`:\n```ts\ninterface ICookieObject {\n  [key: string]: boolean;\n}\n```\n\nExample: \n```ts\n{ \"advertisement\": false, \"analytics\": true }\n```\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eProp\u003c/th\u003e\n        \u003cth\u003eType\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonAccept\u003c/td\u003e\n        \u003ctd\u003efunction(cookies?: ICookieObject){}\u003c/td\u003e\n        \u003ctd\u003e()=\u003e{}\u003c/td\u003e\n        \u003ctd\u003eFunction called when user clicks \"accept\"\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonDecline\u003c/td\u003e\n        \u003ctd\u003efunction(){}\u003c/td\u003e\n        \u003ctd\u003e()=\u003e{}\u003c/td\u003e\n        \u003ctd\u003eFunction called when user clicks \"decline\"\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003einfoContent\u003c/td\u003e\n        \u003ctd\u003eJSX.Element\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003eA JSX component that should contain the heading and paragraph of the greeting view\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003emanagementContent\u003c/td\u003e\n        \u003ctd\u003eJSX.Element\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003eA JSX component rendered in the management view above the cookie checkboxes best containing heading and paragraph text.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eacceptButtonText\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003e\"Accept\"\u003c/td\u003e\n        \u003ctd\u003eString displayed in the accept button\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003edeclineButtonText\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003e\"Decline\"\u003c/td\u003e\n        \u003ctd\u003eString displayed in the decline button\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003emanagementButtonText\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003e\"Manage Cookies\"\u003c/td\u003e\n        \u003ctd\u003eString displayed in the management toggle button\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eenableManagement\u003c/td\u003e\n        \u003ctd\u003eboolean\u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n        \u003ctd\u003eSet to true to display the third button which toggles the management view (where visitors select their cookie preferences). \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ecookieCategories\u003c/td\u003e\n        \u003ctd\u003estring[] (array of strings)\u003c/td\u003e\n        \u003ctd\u003e[]\u003c/td\u003e\n        \u003ctd\u003eAn array listing the available cookie preferences to choose from.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eaccentColor\u003c/td\u003e\n        \u003ctd\u003estring (React.CSSProperties.backgroundColor)\u003c/td\u003e\n        \u003ctd\u003e'coral'\u003c/td\u003e\n        \u003ctd\u003eThe accent color used for the primary butttons\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eheadingColor\u003c/td\u003e\n        \u003ctd\u003estring (React.CSSProperties.color)\u003c/td\u003e\n        \u003ctd\u003e'black'\u003c/td\u003e\n        \u003ctd\u003eThe color applied to h1, h2, h3, h4 elements inside the views\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eparagraphColor\u003c/td\u003e\n        \u003ctd\u003estring (React.CSSProperties.color)\u003c/td\u003e\n        \u003ctd\u003e'grey'\u003c/td\u003e\n        \u003ctd\u003eThe color applied to p elements inside the views\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003econtainerStyle\u003c/td\u003e\n        \u003ctd\u003eobject (React.CSSProperties)\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003eStyle object overriding the banner or modal style\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eprimaryButtonStyle\u003c/td\u003e\n        \u003ctd\u003eobject (React.CSSProperties)\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003eStyle object overriding the primary buttons' style\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003esecondaryButtonStyle\u003c/td\u003e\n        \u003ctd\u003eobject (React.CSSProperties)\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003eStyle object overriding the secondary buttons' style\u003c/td\u003e\n    \u003c/tr\u003e\n\n\u003c/table\u003e\n\n\n## Sample usage in a NextJs project\n\n1. Make a component named Cookie.tsx in your components folder with the following content.\n```tsx\n'use client';\n\nimport { CookieBanner } from '@schlomoh/react-cookieconsent';\nimport React from 'react';\n\nconst MyCookieBanner = () =\u003e {\n    const Content = () =\u003e (\n        \u003c\u003e\n            \u003ch3\u003eLorem Ipsum Dolor Sit Amet\u003c/h3\u003e\n            \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. \u003ca href=\"/cookie\" className='text-blue underline'\u003eCookie Policy\u003c/a\u003e\u003c/p\u003e\n\n        \u003c/\u003e\n    )\n\n    const MContent = () =\u003e (\n        \u003c\u003e\n            \u003ch3\u003e Lorem Ipsum Dolor Sit Amet \u003c/h3\u003e\n            \u003cp\u003e Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. \u003c/p\u003e\n        \u003c/\u003e\n    )\n    \n    const containerStyle = {backgroundColor: 'white'};\n    const buttonStyle = {borderRadius: 0}\n    const primaryButtonStyle={...buttonStyle, backgroundColor:'green'}\n    const secondaryButtonStyle={...buttonStyle, backgroundColor:'red'}\n    \n  return (\n    \u003cCookieBanner\n        acceptButtonText='I accept'\n        declineButtonText='Reject'\n        headingColor='black'\n        paragraphColor='grey'\n        containerStyle={containerStyle}\n        primaryButtonStyle={primaryButtonStyle}\n        secondaryButtonStyle={secondaryButtonStyle}\n        infoContent={\u003cContent /\u003e}\n        enableManagement\n        managementContent={\u003cMContent /\u003e}\n        managementButtonText='Consent Preferences'\n        cookieCategories={['analytics', 'advertisement']}\n        // accentColor = 'coral'\n    /\u003e\n  );\n};\n\nexport default MyCookieBanner;\n \n```\n2. add the component it your App.js or _app,js or app/layout.js file\n```\nimport CookieBanner from '@/components/Cookie'\n...\n\n...\n     \n        \u003cThemeProviders\u003e\n          \u003cAnalytics analyticsConfig={siteMetadata.analytics as AnalyticsConfig} /\u003e\n          \u003cSectionContainer\u003e\n            \u003cdiv className=\"flex h-screen flex-col justify-between font-sans\"\u003e\n              \u003cSearchProvider\u003e\n                \u003cHeader /\u003e               \n                \u003cmain className=\"mb-auto\"\u003e{children}\u003c/main\u003e\n              \u003c/SearchProvider\u003e\n              \u003cFooter /\u003e\n              \u003cCookieBanner /\u003e\n            \u003c/div\u003e\n          \u003c/SectionContainer\u003e\n        \u003c/ThemeProviders\u003e\n...\n```\n\nHere's how looks like:-\n![Screenshot 2024-07-02 at 9 55 45 PM](https://github.com/zriyansh/cookieConsent/assets/52788043/03107f9c-7498-4bd8-bf14-e398a83d104a)\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschlomoh%2Fcookieconsent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fschlomoh%2Fcookieconsent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschlomoh%2Fcookieconsent/lists"}