{"id":40546046,"url":"https://github.com/mikelgmh/cookie-manager","last_synced_at":"2026-01-20T23:38:24.585Z","repository":{"id":66971834,"uuid":"561400862","full_name":"mikelgmh/cookie-manager","owner":"mikelgmh","description":"Inject traditional or analytics scripts dynamically according to the cookie preferences chosen in a modal.","archived":false,"fork":false,"pushed_at":"2023-09-06T11:12:40.000Z","size":23500,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-08T19:39:47.057Z","etag":null,"topics":["cookie-manager","cookies","javascript","sass","scripts","typescript"],"latest_commit_sha":null,"homepage":"","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/mikelgmh.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-11-03T15:57:41.000Z","updated_at":"2024-01-12T18:44:42.000Z","dependencies_parsed_at":"2024-10-22T22:05:11.198Z","dependency_job_id":null,"html_url":"https://github.com/mikelgmh/cookie-manager","commit_stats":{"total_commits":87,"total_committers":2,"mean_commits":43.5,"dds":0.02298850574712641,"last_synced_commit":"301bdd4613e5a9d1cc365a68b847241dfd44c945"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mikelgmh/cookie-manager","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikelgmh%2Fcookie-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikelgmh%2Fcookie-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikelgmh%2Fcookie-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikelgmh%2Fcookie-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mikelgmh","download_url":"https://codeload.github.com/mikelgmh/cookie-manager/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikelgmh%2Fcookie-manager/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28618803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T22:24:05.405Z","status":"ssl_error","status_checked_at":"2026-01-20T22:20:31.342Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-manager","cookies","javascript","sass","scripts","typescript"],"created_at":"2026-01-20T23:38:24.529Z","updated_at":"2026-01-20T23:38:24.576Z","avatar_url":"https://github.com/mikelgmh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cookie-manager\nThis library allows to inject scripts dynamically according to the cookie preferences chosen in a modal. You can also set values for cookies automatically for each cookie category. [GitHub repository](https://github.com/mikelgmh/cookie-manager).\n\n\n![enter image description here](https://i.imgur.com/hxAJYBE.png)\n\n## Installation\n\n```bash\nnpm install @mikelgmh/cookie-manager\n```\n\n## Get started\n\n```jsx\nimport { CookiesManager, ScriptType } from '@mikelgmh/cookie-manager';\nimport '@mikelgmh/cookie-manager/dist/index.css'; // Optional. Default styles.\n\nconst cookiesManager = new CookiesManager(options); // Check the options object below\ncookiesManager.init(true, false); // The first value shows the banner on load, the second value shows the modal on load\n\n// You can manually open or close both\n// OPEN\ncookiesManager.showBanner();\ncookiesManager.showModal();\n\n// CLOSE\ncookiesManager.hideBanner();\ncookiesManager.hideModal();\n```\n\n## Styling\n\nYou can optionally import the **default styles**. \n\n```jsx\nimport '@mikelgmh/cookie-manager/dist/index.css'; // Optional. Default styles.\n```\n\nIf you want to use your own styles you can **customize the default template** by importing [this SCSS file](https://github.com/mikelgmh/cookie-manager/blob/master/src/scss/components/_modal.scss) to your project.\n\n## Options\n\nHere’s an example of the options object. Every option has a default value, so the only required option is the `cookieCategories` array.\n\n```jsx\n{\n    askOnce: true, // If the user already accepted the cookies, don't ask again on page reload\n    askOnChange: true, // Ask again if cookieCategories array is modified. This overrides the askOnce option\n    askAgainIfRejectedAfterDays: -1, // -1 to disable, set to 30 to ask after 30 days if the user rejected any cookie\n    delay: 0, // Sets a timeout to show the banner / modal using the init() method.\n    modalOptions: { // Options for the modal\n        inject: true, // Inject the HTML of the modal using Javascript. This might cause CSP issues if CSP is on\n        showModalClass: \"show-modal\", // The clas used to show the modal. Use it along with modal__container\n        title: \"Cookie settings\",\n        description: \"Change the settings for your cookies here.\",\n        acceptAllButton: {\n            text: 'Accept all',\n            show: true,\n            onClick: () =\u003e { },\n        },\n        rejectAllButton: {\n            text: 'Reject all',\n            show: true,\n            onClick: () =\u003e { },\n        },\n        saveButton: {\n            text: 'Save',\n            show: true,\n            onClick: () =\u003e { },\n        },\n        closeButton: {\n            text: 'Close', // Not implemented yet. This shows the X mark in the modal's corner\n            show: true,\n        },\n    },\n    bannerOptions: { // Options for the banner\n        inject: true, // Inject the HTML of the banner using Javascript. This might cause CSP issues if CSP is on\n        wall: true, // Block the background with a semi-transparent wall\n        injectWall: true, // Injects the HTML for the wall.  This might cause CSP issues if CSP is on\n        wallScroll: true, // Allow the scroll.\n        wallBlur: false, //Blurs the background wall\n        bannerText: 'This website uses cookies to ensure you get the best experience on our website.',\n        acceptAllButton: {\n            text: 'Accept all',\n            show: true,\n            onClick: () =\u003e { },\n        },\n        rejectAllButton: {\n            text: 'Reject all',\n            show: true,\n            onClick: () =\u003e { },\n        },\n        settingsButton: {\n            text: 'Configure',\n            show: true,\n            onClick: () =\u003e { },\n        },\n    },\n    cookieCategories: [ // The cookie categories. These will appear in the cookie modal\n        {\n            id: \"my-custom-id-1\", // Custom id. Useful to identify the categories on the onCookieCategoryChange callback.\n            title: 'Analytics Cookies',\n            description: 'This is a test description. You can change this in the options object.',\n            required: false, // Set to true to disable the switch\n            checked: false, // Set to true to check the switch\n            boxedHeader: false, // Puts the category in a Box\n            boxedBody: false, // Adds margins to fit the body in the header's box\n            accordion: {\n                enable: false, // Enables an accordion for the description\n                active: false, // Sets the accordion to active by default\n            },\n            events: { // You can defined some callbacks or events easily.\n                onAccept: () =\u003e { }, // Callback function. This method is called when the user accepted this cookieCategory when the user presses the save button.\n                onReject: () =\u003e { }, // Callback function. This method is called when the user accepted this cookieCategory when the user presses the save button.\n                setCookiesOnChange: [ // This array can be empty []. If you want to change some cookie values, you can follow this example:\n                    {\n                        cookieName: \"analyticsCookie\",\n                        valueOnAccept: true,\n                        valueOnReject: false,\n                        expirationDays: 365, // Be careful, the limit is 400 days!\n                    },\n                    {\n                        cookieName: \"adsCookie\",\n                        valueOnAccept: true,\n                        valueOnReject: false,\n                        expirationDays: 365, // Be careful, the limit is 400 days!\n                    }\n                ]\n            },\n            scripts: [ // The scripts array can have an empty value [] if you don't want to inject scripts\n                {\n                    type: ScriptType.STANDARD, // Standart to inject a regular script. GTM if using GTM.\n                    // gtmCode: '', // Set this value if using GTM\n                    scriptSrc: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js',\n                    async: true,\n                },\n            ],\n        },\n        {\n            id: \"my-custom-id-2\", // Custom id. Useful to identify the categories on the onCookieCategoryChange callback.\n            title: 'Analytics Cookies',\n            description: 'This is a test description. You can change this in the options object.',\n            required: false,\n            scripts: [ // The scripts array can have an empty value [] if you don't want to inject scripts\n                {\n                    type: ScriptType.STANDARD,\n                    // gtmCode: '',\n                    scriptSrc: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js',\n                    async: true,\n                },\n            ],\n            events: { // You can defined some callbacks or events easily.\n                onAccept: () =\u003e { }, // Callback function. This method is called when the user accepted this cookieCategory when the user presses the save button.\n                onReject: () =\u003e { }, // Callback function. This method is called when the user accepted this cookieCategory when the user presses the save button.\n                setCookiesOnChange: [ // This array can be empty []. If you want to change some cookie values, you can follow this example:\n                    {\n                        cookieName: \"analyticsCookie\",\n                        valueOnAccept: true,\n                        valueOnReject: false,\n                        expirationDays: 365, // Be careful, the limit is 400 days!\n                    },\n                    {\n                        cookieName: \"adsCookie\",\n                        valueOnAccept: true,\n                        valueOnReject: false,\n                        expirationDays: 365, // Be careful, the limit is 400 days!\n                    }\n                ]\n            },\n        },\n    ],\n}\n```\n\n## Order of scripts\n\nYou can change the order of script injection by moving the objects in the `scripts` array up or down.\n\n## Using it together with CSP\n\nThis library injects HTML directly to the DOM, so if your CSP configuracion does not allow this, you can manually add the HTML to your project. To get it to work, you need to set the inject value to false in bannerOptions and modalOptions.\n\n1. Copy and paste the HTML elements to your projects:\n\n```html\n\u003cdiv class=\"c-cookies-config-wall\"\u003e\u003c/div\u003e\n```\n```html\n    \u003cdiv class=\"c-cookies-config-banner\"\u003e\n        \u003cdiv class=\"banner-container\"\u003e\n            \u003cp\u003eThis website uses cookies to ensure you get the best experience on our website.\u003c/p\u003e\n            \u003cdiv class=\"banner-container__buttons\"\u003e\n                \u003cbutton class=\"banner-container__button banner-container__accept-all-btn cm-banner-accept-all-btn\"\u003eAccept all\u003c/button\u003e\n                \u003cbutton class=\"banner-container__button banner-container__reject-all-btn cm-banner-reject-all-btn\"\u003eReject all\u003c/button\u003e\n                \u003cbutton class=\"banner-container__button-link banner-container__config-btn cm-banner-config-btn\"\u003eSettings\u003c/button\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n```\n```html\n    \u003cdiv class=\"c-cookies-config-modal\"\u003e\n        \u003cdiv class=\"modal__container\" id=\"modal-container\"\u003e\n        \u003cdiv class=\"modal__content\"\u003e\n            \u003cdiv class=\"modal__close close-modal\" title=\"Close\"\u003e\n                \u003cdiv class=\"close-modal-img\"\u003e\u003c/div\u003e\n            \u003c/div\u003e\n        \n            \u003ch1 class=\"modal__title\"\u003eConfiguración de cookies\u003c/h1\u003e\n            \u003cp class=\"modal__description\"\u003eConfigura aquí tus cookies.\u003c/p\u003e\n            \u003cdiv class=\"modal__cookie-categories\"\u003e\n                \n            \u003cdiv class=\"cookie-category\"\u003e\n                \u003cdiv class=\"cookie-category__header cc-header\"\u003e\n                    \u003ch2 class=\"header__title\"\u003e\n                    Cookies funcionales\n                    \u003c/h2\u003e\n                    \u003cdiv class=\"header__switch\"\u003e\n                    \u003clabel class=\"switch disabled\"\u003e\n                        \u003cinput disabled=\"\" checked=\"\" class=\"cm-switch-0\" type=\"checkbox\"\u003e\n                        \u003cspan class=\"slider round\"\u003e\u003c/span\u003e\n                    \u003c/label\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003cdiv class=\"cookie-category__body body\"\u003e\n                \u003cp\u003eThis is a test description. You can change this in the options object.\u003c/p\u003e\n            \u003c/div\u003e\n            \u003c/div\u003e\n            \n            \u003cdiv class=\"cookie-category\"\u003e\n                \u003cdiv class=\"cookie-category__header cc-header\"\u003e\n                    \u003ch2 class=\"header__title\"\u003e\n                    Cookies de analítica\n                    \u003c/h2\u003e\n                    \u003cdiv class=\"header__switch\"\u003e\n                    \u003clabel class=\"switch \"\u003e\n                        \u003cinput checked=\"\" class=\"cm-switch-1\" type=\"checkbox\"\u003e\n                        \u003cspan class=\"slider round\"\u003e\u003c/span\u003e\n                    \u003c/label\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003cdiv class=\"cookie-category__body body\"\u003e\n                \u003cp\u003eThis is a test description. You can change this in the options object.\u003c/p\u003e\n            \u003c/div\u003e\n            \u003c/div\u003e\n            \n            \u003c/div\u003e\n\n            \u003cdiv class=\"modal__footer\"\u003e\n                \u003cbutton class=\"modal__button modal__button-width cm-modal-reject-all footer__button-reject-all\"\u003eReject all\u003c/button\u003e\n                \u003cbutton class=\"modal__button modal__button-width cm-modal-accept-all footer__button-accept-all\"\u003eAccept all\u003c/button\u003e\n                \u003cbutton class=\"modal__button-link close-modal cm-modal-save footer__button-save-btn\"\u003e Save \u003c/button\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n```\n\n2. Call the init method:\n```javascript\n    // First, set the inject value to false in the banner and modal options\n    var options = {\n        cookieCategories: [...],\n        bannerOptions: {\n            inject: false,\n        },\n        modalOptions: {\n            inject: false\n        }\n    };\n\n    const cookiesManager = new CookiesManager(options);\n    cookiesManager.init(true, false); // This method will automatically add the event listeners\n```\n\n## Custom HTML\nYou can create you own banner or modal, you just need to add some classes to your inputs or buttons. Your components should respect these rules\n### Banner\n\n- The banner's parent div must have the following class: `c-cookies-config-banner`. This is used to show / hide the banner.\n- Inside the banner there must be an element with the following class:  `banner-container`. This is used to show / hide the banner.\n- The accept all button must have this class: `cm-banner-accept-all-btn`.\n- The reject all button must have this class: `cm-banner-reject-all-btn`.\n- The cookie config button must have this class: `cm-banner-config-btn`.\n\n### Modal\n\n- The modal's parent div must have the following class: `c-cookies-config-modal`. This is used to show / hide the modal.\n- Inside the modal there must be an element with the following class:  `modal__container`. This is used to show / hide the modal.\n- The modal's close button must have the following class: `close-modal`\n- The modal's save button must have the following class: `cm-modal-save`\n- The modal's accept all button must have the following class: `cm-modal-accept-all`\n- The modal's reject all button must have the following class: `cm-modal-reject-all`\n- The checkbox inputs for each cookieCategory must use this syntax: `cm-switch-[index]`, where index is the switch number starting from 0.\n- Watch out! The cookie categories (inside the `cookieCategories` array in the `options` object) MUST be in the same order as they're printed on screen.\n\n### Wall\n\n- The wall must have this class: `c-cookies-config-wall`\n- The wall on its blurred variant also has this class: `c-cookies-config-wall--blurred`\n\nTo start using the library set the inject values to false in both the banner and modal.\n\n```javascript\n    // First, set the inject value to false in the banner and modal options\n    var options = {\n        cookieCategories: [...],\n        bannerOptions: {\n            inject: false,\n        },\n        modalOptions: {\n            inject: false\n        }\n    };\n\n    const cookiesManager = new CookiesManager(options);\n    cookiesManager.init(true, false); // This method will automatically add the event listeners\n```\n\n## Callbacks\n\nYou can set a callback function by calling the `on` method.\n\n⚠️ It is very important to define the callbacks before calling the init() method ⚠️ If you want to use more specific callbacks, refer to the `events` object in each `cookieCategory`.\n\n### Available callbacks\n\n|callback| params | description\n|--|--|--|\n| onCookieCategoryChange() | cookieCategory | This function is called when the user accepted / rejected a cookie Category after pressing the save button or after initializing the library. If you want an specific callback for each category, check the `events` object in `cookieCategory`.\n\n```javascript\n    var options = {...};\n    const cookiesManager = new CookiesManager(options);\n    cookiesManager.on('onCookieCategoryChange', (cookieCategory) =\u003e {\n        console.log(cookieCategory);\n    });\n    cookiesManager.init(true, false);\n```\n\n## Working example\n\n```jsx\nimport '@mikelgmh/cookie-manager/dist/index.css';\nimport { CookiesManager, ScriptType } from '@mikelgmh/cookie-manager';\n\nvar options = {\n    cookieCategories: [\n        {\n            title: 'Cookies funcionales',\n            description: 'This is a test description. You can change this in the options object.',\n            required: true,\n            scripts: [\n                {\n                    type: ScriptType.STANDARD,\n                    // gtmCode: '',\n                    scriptSrc: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js',\n                    async: true,\n                },\n            ],\n        },\n        {\n            title: 'Cookies de analítica',\n            description: 'This is a test description. You can change this in the options object.',\n            required: false,\n            scripts: [\n                {\n                    type: ScriptType.GTM,\n                    gtmCode: 'GTM-XXXXXXX',\n                    async: true,\n                },\n            ],\n        },\n    ],\n};\n\nconst cookiesManager = new CookiesManager(options);\ncookiesManager.init(true, false);\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikelgmh%2Fcookie-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikelgmh%2Fcookie-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikelgmh%2Fcookie-manager/lists"}