{"_id":"@caish-cloud/react-cookies-consent","_rev":"19-7fca14bf6dff57335502f2d52271caae","name":"@caish-cloud/react-cookies-consent","dist-tags":{"latest":"2.1.3"},"versions":{"1.0.6":{"name":"@caish-cloud/react-cookies-consent","version":"1.0.6","keywords":["react","cookies","consent","preferences","modal","alert","component","typescript","chakra","ui","chakraui","framer","motion","zustand"],"author":{"name":"Caish Cloud, LLC"},"license":"MIT","_id":"@caish-cloud/react-cookies-consent@1.0.6","maintainers":[{"name":"caish-cloud-admin","email":"caishcloud@gmail.com"}],"homepage":"https://github.com/caish-cloud/react-cookies-consent","bugs":{"url":"https://github.com/caish-cloud/react-cookies-consent/issues"},"dist":{"shasum":"a1f8e552c7d9cdf318d1a14caf6c3b9fb9a2d5b0","tarball":"https://registry.npmjs.org/@caish-cloud/react-cookies-consent/-/react-cookies-consent-1.0.6.tgz","fileCount":78,"integrity":"sha512-Ow6cLRjZjmyK80Vwn34Jl4xUXcjhD75BCIw8Vh5ipOJSD2TJtgWztBJSY9n9Qud9WLrEODtCcZi1B/QAQIf96Q==","signatures":[{"sig":"MEYCIQDGKpg2ej5VKcGxfgnjarsJHrV3iizPaUWEM+5WlCyM9AIhALFJvRW3NEP7k4ugzvsAceDLm4eCgZUQKs1SBR3btafX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":134368},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"ff6a25b06468af95bdc4808bcad6f7c76740d7f7","scripts":{"build":"npx rimraf dist && npx tsc","publish-npm":"npm publish"},"_npmUser":{"name":"caish-cloud-admin","email":"caishcloud@gmail.com"},"repository":{"url":"git+https://github.com/caish-cloud/react-cookies-consent.git","type":"git"},"_npmVersion":"10.5.0","description":"This is a set of React components that provide an easy-to-implement solution for handling users' cookie preferences in your web application πŸͺ","directories":{},"_nodeVersion":"20.12.2","dependencies":{"zustand":"^4.5.2","framer-motion":"^11.1.7","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","@chakra-ui/react":"^2.8.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","rimraf":"^5.0.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.1"},"peerDependencies":{"react":"^16.8.0 || ^17 || ^18"},"_npmOperationalInternal":{"tmp":"tmp/react-cookies-consent_1.0.6_1714678177341_0.6938238507811483","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.7":{"name":"@caish-cloud/react-cookies-consent","version":"1.0.7","keywords":["react","cookies","consent","preferences","modal","alert","component","typescript","chakra","ui","chakraui","framer","motion","zustand"],"author":{"name":"Caish Cloud, LLC"},"license":"MIT","_id":"@caish-cloud/react-cookies-consent@1.0.7","maintainers":[{"name":"caish-cloud-admin","email":"caishcloud@gmail.com"}],"homepage":"https://github.com/caish-cloud/react-cookies-consent","bugs":{"url":"https://github.com/caish-cloud/react-cookies-consent/issues"},"dist":{"shasum":"0e9610a3698ffb96935466ac06240dc3a1b859a0","tarball":"https://registry.npmjs.org/@caish-cloud/react-cookies-consent/-/react-cookies-consent-1.0.7.tgz","fileCount":78,"integrity":"sha512-tFn0lwP78zw+PMR7yVwQ1IDv1JW/FbqTO2/LWobCdAAXJ+eN7V6n3lrBD137O182T6TdN8NmFbyB35l0LLaCxQ==","signatures":[{"sig":"MEQCIGgvp02gIFiXsvLHjJ/u1cc8i4g+pzL84BT9fTX44aKBAiBpH2M1D1egLAbEO/k0ZK/1CVhRZZxz2PDPcnqR5JbBvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136765},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"264eabe2532afeb6586f5e5a6428abf41f5e4f83","scripts":{"build":"npx rimraf dist && npx tsc","publish-npm":"npm publish"},"_npmUser":{"name":"caish-cloud-admin","email":"caishcloud@gmail.com"},"repository":{"url":"git+https://github.com/caish-cloud/react-cookies-consent.git","type":"git"},"_npmVersion":"10.5.0","description":"This is a set of React components that provide an easy-to-implement solution for handling users' cookie preferences in your web application πŸͺ","directories":{},"_nodeVersion":"20.12.2","dependencies":{"zustand":"^4.5.2","framer-motion":"^11.1.7","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","@chakra-ui/react":"^2.8.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","rimraf":"^5.0.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.1"},"peerDependencies":{"react":"^16.8.0 || ^17 || ^18"},"_npmOperationalInternal":{"tmp":"tmp/react-cookies-consent_1.0.7_1715024497912_0.5926173483201864","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.8":{"name":"@caish-cloud/react-cookies-consent","version":"1.0.8","keywords":["react","cookies","consent","preferences","modal","alert","component","typescript","chakra","ui","chakraui","framer","motion","zustand"],"author":{"name":"Caish Cloud, LLC"},"license":"MIT","_id":"@caish-cloud/react-cookies-consent@1.0.8","maintainers":[{"name":"caish-cloud-admin","email":"caishcloud@gmail.com"}],"homepage":"https://github.com/caish-cloud/react-cookies-consent","bugs":{"url":"https://github.com/caish-cloud/react-cookies-consent/issues"},"dist":{"shasum":"bc52ed14e5bd9864291ef42700e6cb67e3981b22","tarball":"https://registry.npmjs.org/@caish-cloud/react-cookies-consent/-/react-cookies-consent-1.0.8.tgz","fileCount":78,"integrity":"sha512-te+oV+XZPnuDUr2BBFhhKXLF+6EoAKIFzAIWIyU4lEqA8gFA+jR8uODu4WjGDgDqkof/iL4nsbkCMJSBDgrx+w==","signatures":[{"sig":"MEQCIAGBG/VwOzmkmQJ2ZE6URpsmcTpFCeSc5Do30I7SK4m/AiBoAUP1YEnPC3twELV0Sl8GHRTGHKx0xS0g8JvdPuvr0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137014},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"ec4c0718fb2f9da17fd789c1e5e26d76deb7a409","scripts":{"build":"npx rimraf dist && npx tsc","publish-npm":"npm publish"},"_npmUser":{"name":"caish-cloud-admin","email":"caishcloud@gmail.com"},"repository":{"url":"git+https://github.com/caish-cloud/react-cookies-consent.git","type":"git"},"_npmVersion":"10.5.0","description":"This is a set of React components that provide an easy-to-implement solution for handling users' cookie preferences in your web application πŸͺ","directories":{},"_nodeVersion":"20.12.2","dependencies":{"zustand":"^4.5.2","framer-motion":"^11.1.7","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","@chakra-ui/react":"^2.8.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","rimraf":"^5.0.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.1"},"peerDependencies":{"react":"^16.8.0 || ^17 || ^18"},"_npmOperationalInternal":{"tmp":"tmp/react-cookies-consent_1.0.8_1715025796554_0.08745008701586365","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.0.0":{"name":"@caish-cloud/react-cookies-consent","version":"2.0.0","keywords":["react","cookies","consent","preferences","modal","alert","component","typescript","chakra","ui","chakraui","framer","motion","zustand"],"author":{"name":"Caish Cloud, LLC"},"license":"MIT","_id":"@caish-cloud/react-cookies-consent@2.0.0","maintainers":[{"name":"caish-cloud-admin","email":"caishcloud@gmail.com"}],"homepage":"https://github.com/caish-cloud/react-cookies-consent","bugs":{"url":"https://github.com/caish-cloud/react-cookies-consent/issues"},"dist":{"shasum":"0332d07eb911e2f19f91280525bf17a01ff82a2a","tarball":"https://registry.npmjs.org/@caish-cloud/react-cookies-consent/-/react-cookies-consent-2.0.0.tgz","fileCount":78,"integrity":"sha512-xF8K+4nogTEdYqhpXiJFh7wL0J/BpAY9mJ3vKd2yoFUkVKm+qAHZyXlH0dfe01iQW67UkpWzND4Z/rZyhxQXsA==","signatures":[{"sig":"MEYCIQDRdQIu7btwTA3EVkMRFEcg3NCVI8enOlgS5ta2gO50xwIhAJ442IMWwPxTZmWSCTC3WAunvJbUcgBcd/BN+xEhBpgs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":138737},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"b1dc21db5854cd035ab0c00367e1b6d48591880f","scripts":{"build":"npx rimraf dist && npx tsc","publish-npm":"npm publish"},"_npmUser":{"name":"caish-cloud-admin","email":"caishcloud@gmail.com"},"repository":{"url":"git+https://github.com/caish-cloud/react-cookies-consent.git","type":"git"},"_npmVersion":"10.5.0","description":"This is a set of React components that provide an easy-to-implement solution for handling users' cookie preferences in your web application πŸͺ","directories":{},"_nodeVersion":"20.12.2","dependencies":{"zustand":"^4.5.2","framer-motion":"^11.1.7","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","@chakra-ui/react":"^2.8.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","rimraf":"^5.0.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.1"},"peerDependencies":{"react":"^16.8.0 || ^17 || ^18"},"_npmOperationalInternal":{"tmp":"tmp/react-cookies-consent_2.0.0_1715086292674_0.5554442289246184","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.1.0":{"name":"@caish-cloud/react-cookies-consent","version":"2.1.0","keywords":["react","cookies","consent","preferences","modal","alert","component","typescript","chakra","ui","framer","motion","animation","zustand"],"author":{"name":"Caish Cloud, LLC"},"license":"MIT","_id":"@caish-cloud/react-cookies-consent@2.1.0","maintainers":[{"name":"caish-cloud-admin","email":"caishcloud@gmail.com"}],"homepage":"https://github.com/caish-cloud/react-cookies-consent","bugs":{"url":"https://github.com/caish-cloud/react-cookies-consent/issues"},"dist":{"shasum":"a69f21c6e9bbf613881164b5d01e6973e3db0ddb","tarball":"https://registry.npmjs.org/@caish-cloud/react-cookies-consent/-/react-cookies-consent-2.1.0.tgz","fileCount":81,"integrity":"sha512-X+SqpgXFmvbjVf2uumn9abh+Xqa2N2BLuiin58FZ7P6shHcAkybY/H08ZAqbGYLQkrXE4CHE505eDvPuBx+CEg==","signatures":[{"sig":"MEUCIQDHifT4KzS1JtSADN9SLeCLyrqxoiWt1VLzzb+sT0IAIwIgahZ5Mv4QANbG07qoZjbKiijee5nSL9huwggcpL0CQ3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":142485},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"80904e8c0c264b509b78f92d4783f0883834cf9f","scripts":{"build":"npx rimraf dist && npx tsc","publish-npm":"npm publish"},"_npmUser":{"name":"caish-cloud-admin","email":"caishcloud@gmail.com"},"repository":{"url":"git+https://github.com/caish-cloud/react-cookies-consent.git","type":"git"},"_npmVersion":"10.5.0","description":"This is a set of React components that provide an easy-to-implement solution for handling users' cookie preferences in your web application πŸͺ","directories":{},"_nodeVersion":"20.12.2","dependencies":{"zustand":"^4.5.2","framer-motion":"^11.1.7","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","@chakra-ui/react":"^2.8.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","rimraf":"^5.0.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.1"},"peerDependencies":{"react":"^16.8.0 || ^17 || ^18"},"_npmOperationalInternal":{"tmp":"tmp/react-cookies-consent_2.1.0_1715343530264_0.2378106815174199","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.1.1":{"name":"@caish-cloud/react-cookies-consent","version":"2.1.1","keywords":["react","cookies","consent","preferences","modal","alert","component","typescript","chakra","ui","framer","motion","animation","zustand"],"author":{"name":"Caish Cloud, LLC"},"license":"MIT","_id":"@caish-cloud/react-cookies-consent@2.1.1","maintainers":[{"name":"caish-cloud-admin","email":"caishcloud@gmail.com"}],"homepage":"https://github.com/caish-cloud/react-cookies-consent","bugs":{"url":"https://github.com/caish-cloud/react-cookies-consent/issues"},"dist":{"shasum":"188a4d80cb56a808e6e9725025e34ae6fff375b0","tarball":"https://registry.npmjs.org/@caish-cloud/react-cookies-consent/-/react-cookies-consent-2.1.1.tgz","fileCount":81,"integrity":"sha512-7eSkMBtBiTa40YdI/VMugtyb7FM23Gchir39Ats1ylLa0YZew37cjjpsGZdWXpUS0r80lkD8g2SSALcKPgbm/Q==","signatures":[{"sig":"MEUCIQDFx9T3NpI8Q7WIK8Tfk+rwCXH/YMu23hpAtMvtDJYz1wIgJQVBPUgzy7fP0oHI5YzKVufUgOhGt3EZ0oI4P0HZXlA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":142485},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"88fc1113a0c4200c604a6522a2ca059e38f5ddcf","scripts":{"build":"npx rimraf dist && npx tsc","publish-npm":"npm publish"},"_npmUser":{"name":"caish-cloud-admin","email":"caishcloud@gmail.com"},"repository":{"url":"git+https://github.com/caish-cloud/react-cookies-consent.git","type":"git"},"_npmVersion":"10.5.2","description":"This is a set of React components that provide an easy-to-implement solution for handling users' cookie preferences in your web application πŸͺ","directories":{},"_nodeVersion":"20.13.1","dependencies":{"zustand":"^4.5.2","framer-motion":"^11.1.7","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","@chakra-ui/react":"^2.8.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","rimraf":"^5.0.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.1"},"peerDependencies":{"react":"^16.8.0 || ^17 || ^18"},"_npmOperationalInternal":{"tmp":"tmp/react-cookies-consent_2.1.1_1716224972392_0.6930733100620146","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.1.2":{"name":"@caish-cloud/react-cookies-consent","version":"2.1.2","keywords":["react","cookies","consent","preferences","modal","alert","component","typescript","chakra","ui","framer","motion","animation","zustand"],"author":{"name":"Caish Cloud, LLC"},"license":"MIT","_id":"@caish-cloud/react-cookies-consent@2.1.2","maintainers":[{"name":"caish-cloud-admin","email":"caishcloud@gmail.com"}],"homepage":"https://github.com/caish-cloud/react-cookies-consent","bugs":{"url":"https://github.com/caish-cloud/react-cookies-consent/issues"},"dist":{"shasum":"2b7febf866aa821e5b36733b7110c16a6ee24dbb","tarball":"https://registry.npmjs.org/@caish-cloud/react-cookies-consent/-/react-cookies-consent-2.1.2.tgz","fileCount":81,"integrity":"sha512-jQRg+gWhCTWWmWH7r029jul3aB6xbc+WJPcASieMOcM3UBhVCFDqfWGyN+bHkXn3yvD78ySpEMYUXYGHl5ALSw==","signatures":[{"sig":"MEYCIQDVwTCDRcrdTgMcpYGkcKxpYR/1bMXk8WaS0WxqdQYdLAIhAMDitdyGqi0LYTWhHcdiu4JzVIjXRquMlmlO5OxYAaOl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":142485},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"c302e06bef1436fcd4078e5cbb2db0a4abc7c703","scripts":{"build":"npx rimraf dist && npx tsc","publish-npm":"npm publish"},"_npmUser":{"name":"caish-cloud-admin","email":"caishcloud@gmail.com"},"repository":{"url":"git+https://github.com/caish-cloud/react-cookies-consent.git","type":"git"},"_npmVersion":"10.5.2","description":"This is a set of React components that provide an easy-to-implement solution for handling users' cookie preferences in your web application πŸͺ","directories":{},"_nodeVersion":"20.13.1","dependencies":{"zustand":"^4.5.2","framer-motion":"^11.1.7","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","@chakra-ui/react":"^2.8.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","rimraf":"^5.0.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.1"},"peerDependencies":{"react":"^16.8.0 || ^17 || ^18"},"_npmOperationalInternal":{"tmp":"tmp/react-cookies-consent_2.1.2_1717418903350_0.7947366493815351","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.1.3":{"name":"@caish-cloud/react-cookies-consent","version":"2.1.3","keywords":["react","cookies","consent","preferences","modal","alert","component","typescript","chakra","ui","framer","motion","animation","zustand"],"author":{"name":"Caish Cloud, LLC"},"license":"MIT","_id":"@caish-cloud/react-cookies-consent@2.1.3","homepage":"https://github.com/caish-cloud/react-cookies-consent","bugs":{"url":"https://github.com/caish-cloud/react-cookies-consent/issues"},"dist":{"shasum":"eb89c0549b24944333c581e2cac2eb1cb8dc5856","tarball":"https://registry.npmjs.org/@caish-cloud/react-cookies-consent/-/react-cookies-consent-2.1.3.tgz","fileCount":81,"integrity":"sha512-Uw/ejIrDDew0wwXuTiQYBbPiRDVTxiE9PPTqKYQxjvpxGtQYJxJhIakGuGXyFYIlFHvsR7qmSglIeMd/TmhDiA==","signatures":[{"sig":"MEUCIQCPf5+XaHvEG0VDE44fJ2r9rgnkM5bxWzQR7WCEYPQ1BQIgCOoMQnoy3twkMZx6R5VUWOZgYhIRf3CAQoK8dltTijc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":142461},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"56e1b014aa90acdc46bac75a85f35a3988d04148","scripts":{"build":"npx rimraf dist && npx tsc","publish-npm":"npm publish"},"_npmUser":{"name":"caish-cloud-admin","email":"caishcloud@gmail.com"},"repository":{"url":"git+https://github.com/caish-cloud/react-cookies-consent.git","type":"git"},"_npmVersion":"10.1.0","description":"This is a set of React components that provide an easy-to-implement solution for handling users' cookie preferences in your web application πŸͺ","directories":{},"_nodeVersion":"20.9.0","dependencies":{"zustand":"^4.5.2","framer-motion":"^11.1.7","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","@chakra-ui/react":"^2.8.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","rimraf":"^5.0.5","react-dom":"^18.2.0","typescript":"^5.4.5","@types/react":"^18.3.1"},"peerDependencies":{"react":"^16.8.0 || ^17 || ^18"},"_npmOperationalInternal":{"tmp":"tmp/react-cookies-consent_2.1.3_1719246557941_0.6989914039810516","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2024-05-02T19:29:37.252Z","modified":"2024-09-11T12:50:11.442Z","1.0.0":"2024-04-29T13:21:11.390Z","1.0.1":"2024-05-02T14:40:49.599Z","1.0.2":"2024-05-02T14:57:44.942Z","1.0.3":"2024-05-02T15:23:18.157Z","1.0.4":"2024-05-02T15:28:31.519Z","1.0.5":"2024-05-02T15:39:13.473Z","1.0.6":"2024-05-02T19:29:37.515Z","1.0.7":"2024-05-06T19:41:38.105Z","1.0.8":"2024-05-06T20:03:16.808Z","2.0.0":"2024-05-07T12:51:32.826Z","2.1.0":"2024-05-10T12:18:50.414Z","2.1.1":"2024-05-20T17:09:32.538Z","2.1.2":"2024-06-03T12:48:23.510Z","2.1.3":"2024-06-24T16:29:18.143Z"},"bugs":{"url":"https://github.com/caish-cloud/react-cookies-consent/issues"},"author":{"name":"Caish Cloud, LLC"},"license":"MIT","homepage":"https://github.com/caish-cloud/react-cookies-consent","keywords":["react","cookies","consent","preferences","modal","alert","component","typescript","chakra","ui","framer","motion","animation","zustand"],"repository":{"url":"git+https://github.com/caish-cloud/react-cookies-consent.git","type":"git"},"description":"This is a set of React components that provide an easy-to-implement solution for handling users' cookie preferences in your web application πŸͺ","maintainers":[{"name":"caish-cloud-admin","email":"caishcloud@gmail.com"}],"readme":"

\n \"react-cookies-consent\n

\n\n# react-cookies-consent\n\n[npm_url]: https://www.npmjs.org/package/@caish-cloud/react-cookies-consent\n\n[![npm version](https://badge.fury.io/js/@caish-cloud%2Freact-cookies-consent.svg)][npm_url]\n[![downloads](https://img.shields.io/npm/dt/@caish-cloud/react-cookies-consent.svg)][npm_url]\n[![license](https://img.shields.io/npm/l/@caish-cloud/react-cookies-consent.svg)][npm_url]\n\nIntroducing a comprehensive and customizable solution for managing cookie consent in your React applications! Our package includes a set of powerful components designed to make the implementation of cookie consent straightforward and compliant with user preferences.\n\nKey Features:\n\n- πŸ”” ``: Jumpstart user interaction with a simple alert at the bottom of the screen that asks users to confirm their cookie preferences, such as accepting all cookies or choosing which to accept and decline. This component is designed to be non-intrusive yet clear to ensure immediate understanding from the user.\n- πŸ“ƒ ``: Provide users with detailed control over their cookie preferences. This modal allows for granular settings adjustments, giving users the power to manage their privacy preferences effectively.\n- ✨ Customization: Tailor the appearance and behavior of your cookie consent components to match your application’s theme and branding. Supports both light and dark modes, ensuring a seamless integration regardless of your UI design.\n- πŸ“± Responsive: Looks great on desktop, tablet, and mobile.\n\nWhether you are looking to ensure compliance, improve user experience, or both, our react-cookies-consent components package offers the tools you need to integrate cookie consent functionality into your applications effortlessly!\n\n## Prerequisites\n\n### Storing User Preferences\n\nThis library is only for saving you the time for developing the components\nnecessary to give the user control over their cookie preferences. You will have\nto manage the actual preferences of the user by storing in your database,\nlocal storage, etc. So please be sure you already have this in place or will\nplan to!\n\n## Table of contents\n\n- [react-cookies-consent](#react-cookies-consent)\n - [Prerequisites](#prerequisites)\n - [Table of contents](#table-of-contents)\n - [Installation](#installation)\n - [Usage](#usage)\n - [Alert](#alert)\n - [Light Theme](#light-theme)\n - [Dark Theme](#dark-theme)\n - [Modal](#modal)\n - [Light Theme](#light-theme-1)\n - [Dark Theme](#dark-theme-1)\n - [Props](#props)\n - [``](#cookiesconsentalert-)\n - [``](#cookiesconsentalertactions-)\n - [``](#cookiesconsentalertbutton-)\n - [``](#cookiesconsentalertcontent-)\n - [``](#cookiesconsentalertdescription-)\n - [``](#cookiesconsentalerttitle-)\n - [``](#cookiesconsentmodal-)\n - [``](#cookiesconsentmodalbody-)\n - [``](#cookiesconsentmodalbutton-)\n - [``](#cookiesconsentmodalcookieactions-)\n - [``](#cookiesconsentmodalcookieaction-)\n - [``](#cookiesconsentmodalctaactions-)\n - [``](#cookiesconsentmodalfooter-)\n - [``](#cookiesconsentmodalheader-)\n - [``](#cookiesconsentmodaltext-)\n - [Refs](#refs)\n - [``](#cookiesconsentalert--1)\n - [``](#cookiesconsentmodal--1)\n - [Troubleshooting](#troubleshooting)\n - [Contributing](#contributing)\n - [Learn More](#learn-more)\n - [Built With](#built-with)\n - [Versioning](#versioning)\n - [Authors](#authors)\n - [License](#license)\n\n## Installation\n\n**BEFORE YOU INSTALL** - please read the [Prerequisites](#prerequisites) section.\n\nTo install and set up the library, run:\n\n```sh\nnpm install @caish-cloud/react-cookies-consent\n```\n\nOr if you prefer using Yarn:\n\n```sh\nyarn add @caish-cloud/react-cookies-consent\n```\n\n## Usage\n\nThe usage examples below will get you started with using the alert component\nin conjunction with the modal component. You do not have to use both!\nYou can use one or the other depending on your development needs.\n\n### Alert\n\nThis component lives at the bottom of the screen, and will animate in (if chosen\nto) to alert the user of their ability to choose their cookie preferences.\n\nThe best place to put this is at the root of your project, such as your\nproviders file, `App.js`, or just somewhere that the user will hit no matter\nwhat page they go to. This is because we want this alert to display on any page\nthe user navigates to if not the home page for compliance reasons. If this is\nnot what you need, feel free to put it anywhere!\n\n#### Light Theme\n\nThis is the default theme for the component and does not require any additional\nconfiguration.\n\n

\n \"Light\n

\n\n```jsx\nimport { CookiesConsentAlert } from '@caish-cloud/react-cookies-consent';\n\nfunction ExampleComponent() {\n return (\n \n \n \n\n \n\n {\n // Handle what happens when user clicks on \"Learn more\" button\n }}\n text=\"Learn more\"\n variant=\"text\"\n />\n \n\n \n {\n // Handle what happens when user accepts all cookies\n }}\n text=\"Accept cookies\"\n />\n\n {\n // Handle what happens when user rejects all cookies\n }}\n regularButtonColor={{ dark: '#718096', light: '#2D3748' }}\n shouldShowModal={true}\n text=\"Cookie settings\"\n />\n \n \n );\n}\n```\n\n#### Dark Theme\n\nAs shown in the code below, you'll need to add the `theme=\"dark\"` parameter to\nthe root component, and that's it!\n\n

\n \"Dark\n

\n\n```jsx\nimport { CookiesConsentAlert } from '@caish-cloud/react-cookies-consent';\n\nfunction ExampleComponent() {\n return (\n \n \n \n\n \n\n {\n // Handle what happens when user clicks on \"Learn more\" button\n }}\n text=\"Learn more\"\n variant=\"text\"\n />\n \n\n \n {\n // Handle what happens when user accepts all cookies\n }}\n text=\"Accept cookies\"\n />\n\n {\n // Handle what happens when user rejects all cookies\n }}\n regularButtonColor={{ dark: '#718096', light: '#2D3748' }}\n shouldShowModal={true}\n text=\"Cookie settings\"\n />\n \n \n );\n}\n```\n\n### Modal\n\nThis component will animate in to the center or top-middle of the screen to give\nthe user granular control over their cookie preferences.\n\nThe best place to put this is right next to the alert component from this\nlibrary. If you're not using the alert component, then you can put this where\nyou'll need it!\n\n#### Light Theme\n\nThis is the default theme for the component and does not require any additional\nconfiguration.\n\n

\n \"Light\n

\n\n```jsx\nimport { CookiesConsentModal } from '@caish-cloud/react-cookies-consent';\n\nfunction ExampleComponent() {\n return (\n \n \n\n \n \n\n \n {\n // Handle what happens when user accepts all cookies\n }}\n regularButtonColor={{ dark: '#718096', light: '#2D3748' }}\n text=\"Accept all\"\n />\n\n {\n // Handle what happens when user rejects all cookies\n }}\n regularButtonColor={{ dark: '#718096', light: '#2D3748' }}\n text=\"Reject all\"\n />\n \n\n \n \n\n {\n // Handle what happens when user toggles preferences cookies\n }}\n title=\"Preferences\"\n />\n\n {\n // Handle what happens when user toggles analytics cookies\n }}\n title=\"Analytics\"\n />\n\n {\n // Handle what happens when user toggles marketing cookies\n }}\n title=\"Marketing\"\n />\n \n \n\n \n {\n // Handle what happens when user saves their cookie settings\n }}\n text=\"Save settings\"\n />\n \n \n );\n}\n```\n\n#### Dark Theme\n\nAs shown in the code below, you'll need to add the `theme=\"dark\"` parameter to\nthe root component, and that's it!\n\n

\n \"Dark\n

\n\n```jsx\nimport { CookiesConsentModal } from '@caish-cloud/react-cookies-consent';\n\nfunction ExampleComponent() {\n return (\n \n \n\n \n \n\n \n {\n // Handle what happens when user accepts all cookies\n }}\n regularButtonColor={{ dark: '#718096', light: '#2D3748' }}\n text=\"Accept all\"\n />\n\n {\n // Handle what happens when user rejects all cookies\n }}\n regularButtonColor={{ dark: '#718096', light: '#2D3748' }}\n text=\"Reject all\"\n />\n \n\n \n \n\n {\n // Handle what happens when user toggles preferences cookies\n }}\n title=\"Preferences\"\n />\n\n {\n // Handle what happens when user toggles analytics cookies\n }}\n title=\"Analytics\"\n />\n\n {\n // Handle what happens when user toggles marketing cookies\n }}\n title=\"Marketing\"\n />\n \n \n\n \n {\n // Handle what happens when user saves their cookie settings\n }}\n text=\"Save settings\"\n />\n \n \n );\n}\n```\n\n## Props\n\n### ``\n\nThis is the root/parent component for the alert. This is required.\n\n#### `containerStyle`\n\nThe styles for the container of the alert.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { backgroundColor: \"#2D3748\" }, light: { backgroundColor: \"white\" } }` |\n\n#### Example\n\n```jsx\n\n```\n\n---\n\n#### `enterExitAnimation`\n\nHow the alert should enter and exit the screen.\n\n| Required | Type | Default |\n| -------- | ---------------------------------------------- | --------------- |\n| False | `\"from-bottom\" \\| \"from-left\" \\| \"from-right\"` | `\"from-bottom\"` |\n\n#### Example\n\n```jsx\n\n```\n\n---\n\n#### `enterExitAnimationEnabled`\n\nWhether the enter/exit animations for the alert is enabled.\n\n| Required | Type | Default |\n| -------- | --------- | ------- |\n| False | `boolean` | `true` |\n\n#### Example\n\n```jsx\n\n```\n\n---\n\n#### `localStorageKeyName`\n\nThe key name for the local storage item that stores the alert dismissed state.\n\n| Required | Type | Default |\n| -------- | -------- | ----------------------------------------- |\n| False | `string` | `\"react-cookies-consent/alert-dismissed\"` |\n\n#### Example\n\n```jsx\n\n```\n\n---\n\n#### `placement`\n\nThe placement of the alert on the screen.\n\n| Required | Type | Default |\n| -------- | ---------------------------------------------------- | ----------------- |\n| False | `\"bottom-center\" \\| \"bottom-left\" \\| \"bottom-right\"` | `\"bottom-center\"` |\n\n#### Example\n\n```jsx\n\n```\n\n---\n\n#### `theme`\n\nThe theme for the alert (i.e. light/dark mode).\n\n| Required | Type | Default |\n| -------- | ------------------- | --------- |\n| False | `\"dark\" \\| \"light\"` | `\"light\"` |\n\n#### Example\n\n```jsx\n\n```\n\n---\n\n### ``\n\nThis is the container for the Call-to-Action (CTA) buttons in the alert, which\ncan accept these components:\n\n- ``\n\n#### `containerStyle`\n\nThe styles for the container of the actions.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |\n\n#### Example\n\n```jsx\n\n \n\n```\n\n---\n\n### ``\n\nThis is a button used within the alert. This component can be used within\nthese components:\n\n- ``\n- ``\n\n#### `clickAnimationEnabled`\n\nWhether the button should have click animations.\n\n> Note: this is disabled by default when using the `\"text\"` variant.\n\n| Required | Type | Default |\n| -------- | --------- | ------- |\n| False | `boolean` | `true` |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n#### `containerStyle`\n\nThe styles for the container of the button.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { backgroundColor: \"#0082ba\" }, light: { backgroundColor: \"#0082ba\" } }` |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n#### `hoverAnimationEnabled`\n\nWhether the button should animate when hovered.\n\n| Required | Type | Default |\n| -------- | --------- | ------- |\n| False | `boolean` | `true` |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n#### `onClick`\n\nHandles what happens when the button is clicked.\n\n| Required | Type | Default |\n| -------- | ------------ | ------- |\n| True | `() => void` | - |\n\n#### Example\n\n```jsx\n\n \n console.log('clicked')} />\n \n\n```\n\n---\n\n#### `regularButtonColor`\n\nThe color of the regular variant button.\n\n| Required | Type | Default |\n| -------- | ---------------------------------- | --------------------------------------- |\n| False | `{ dark?: string, light: string }` | `{ dark: \"#0082ba\", light: \"#0082ba\" }` |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n#### `shouldDismissAlert`\n\nWhether the alert should be dismissed when the button is clicked.\n\n| Required | Type | Default |\n| -------- | --------- | ------- |\n| False | `boolean` | `true` |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n#### `shouldShowModal`\n\nWhether the modal should be shown when the button is clicked.\n\n| Required | Type | Default |\n| -------- | --------- | ------- |\n| False | `boolean` | `false` |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n#### `text`\n\nThe text to display in the button.\n\n| Required | Type | Default |\n| -------- | -------- | ------- |\n| True | `string` | - |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n#### `textButtonColor`\n\nThe color of the text variant button.\n\n| Required | Type | Default |\n| -------- | ---------------------------------- | --------------------------------------- |\n| False | `{ dark?: string, light: string }` | `{ dark: \"#00a2e8\", light: \"#00a2e8\" }` |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n#### `textStyle`\n\nThe styles for the button text.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | --------------------------------------------------------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: \"white\" }, light: { color: \"white\" } }` |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n#### `variant`\n\nThe type of button to render.\n\n- `\"regular\"` - A regular looking button.\n- `\"text\"` - A button that looks like a text link.\n\n| Required | Type | Default |\n| -------- | --------------------- | ----------- |\n| False | `\"regular\" \\| \"text\"` | `\"regular\"` |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n### ``\n\nThis is the container for the content of the alert, which can accept these\ncustom components:\n\n- ``\n- ``\n- ``\n\nThis is required.\n\n#### `containerStyle`\n\nThe styles for the container of the content.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |\n\n#### Example\n\n```jsx\n\n \n\n```\n\n---\n\n### ``\n\nThis is the description of the alert.\n\n#### `containerStyle`\n\nThe styles for the container of the description.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n#### `text`\n\nThe text to display as the description.\n\n| Required | Type | Default |\n| -------- | -------- | ------- |\n| True | `string` | - |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n#### `textStyle`\n\nThe styles for the description text.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ----------------------------------------------------------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: \"white\" }, light: { color: \"#2D3748\" } }` |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n### ``\n\nThis is the title of the alert.\n\n#### `containerStyle`\n\nThe styles for the container of the title.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n#### `text`\n\nThe text to display as the title.\n\n| Required | Type | Default |\n| -------- | -------- | ------- |\n| True | `string` | - |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n#### `textStyle`\n\nThe styles for the title text.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ----------------------------------------------------------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: \"white\" }, light: { color: \"#2D3748\" } }` |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n### ``\n\nThis is the root/parent component for the modal. This is required.\n\n#### `closeButtonStyle`\n\nThe styles for the close button.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ----------------------------------------------------------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: \"white\" }, light: { color: \"#2D3748\" } }` |\n\n#### Example\n\n```jsx\n\n```\n\n---\n\n#### `containerStyle`\n\nThe styles for the content container of the modal.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { backgroundColor: \"#2D3748\" }, light: { backgroundColor: \"white\" } }` |\n\n#### Example\n\n```jsx\n\n```\n\n---\n\n#### `onModalClose`\n\nHandles what happens when the modal is closed.\n\n| Required | Type | Default |\n| -------- | ------------ | ------- |\n| False | `() => void` | - |\n\n#### Example\n\n```jsx\n console.log('closed')} />\n```\n\n---\n\n#### `overlayBlurAmount`\n\nThe amount of blur for the overlay.\n\n| Required | Type | Default |\n| -------- | -------- | ------- |\n| False | `number` | `4` |\n\n#### Example\n\n```jsx\n\n```\n\n---\n\n#### `overlayBlurEnabled`\n\nWhether the overlay should have a blurred effect.\n\n| Required | Type | Default |\n| -------- | --------- | ------- |\n| False | `boolean` | `true` |\n\n#### Example\n\n```jsx\n\n```\n\n---\n\n#### `overlayColor`\n\nThe color of the overlay.\n\n| Required | Type | Default |\n| -------- | -------- | -------------------- |\n| False | `string` | `rgba(0, 0, 0, 0.5)` |\n\n> Note: this is only used when `overlayBlurEnabled` is `false`.\n\n#### Example\n\n```jsx\n\n```\n\n---\n\n#### `placement`\n\nThe placement of the modal on the screen.\n\n| Required | Type | Default |\n| -------- | -------------------------- | -------- |\n| False | `\"center\" \\| \"middle-top\"` | \"center\" |\n\n#### Example\n\n```jsx\n\n```\n\n---\n\n#### `shouldShowCloseButton`\n\nWhether the close button should be shown in the modal.\n\n| Required | Type | Default |\n| -------- | --------- | ------- |\n| False | `boolean` | `true` |\n\n#### Example\n\n```jsx\n\n```\n\n---\n\n#### `shouldShowOverlay`\n\nWhether the overlay should be shown when the modal is open.\n\n| Required | Type | Default |\n| -------- | --------- | ------- |\n| False | `boolean` | `true` |\n\n#### Example\n\n```jsx\n\n```\n\n---\n\n#### `theme`\n\nThe theme for the modal (i.e. light/dark mode).\n\n| Required | Type | Default |\n| -------- | ------------------- | --------- |\n| False | `\"dark\" \\| \"light\"` | `\"light\"` |\n\n#### Example\n\n```jsx\n\n```\n\n---\n\n### ``\n\nThe modal body container that will contain all of the user's content, which can\naccept these custom components:\n\n- ``\n- ``\n- ``\n- ``\n- ``\n\nThis is required.\n\n#### `containerStyle`\n\nThe styles for the modal body container.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |\n\n#### Example\n\n```jsx\n\n \n\n```\n\n---\n\n### ``\n\nThis is a button used within the modal. This component can be used within\nthese components:\n\n- ``\n- ``\n\n#### `clickAnimationEnabled`\n\nWhether the button should have click animations.\n\n> Note: this is disabled by default when using the `\"text\"` variant.\n\n| Required | Type | Default |\n| -------- | --------- | ------- |\n| False | `boolean` | `true` |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `containerStyle`\n\nThe styles for the container of the button.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { backgroundColor: \"#0082ba\" }, light: { backgroundColor: \"#0082ba\" } }` |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `hoverAnimationEnabled`\n\nWhether the button should animate when hovered.\n\n| Required | Type | Default |\n| -------- | --------- | ------- |\n| False | `boolean` | `true` |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `onClick`\n\nHandles what happens when the button is clicked.\n\n| Required | Type | Default |\n| -------- | ------------ | ------- |\n| True | `() => void` | - |\n\n#### Example\n\n```jsx\n\n \n \n console.log('clicked')} />\n \n \n\n```\n\n---\n\n#### `regularButtonColor`\n\nThe color of the regular variant button.\n\n| Required | Type | Default |\n| -------- | ---------------------------------- | --------------------------------------- |\n| False | `{ dark?: string, light: string }` | `{ dark: \"#0082ba\", light: \"#0082ba\" }` |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `shouldDismissAlert`\n\nWhether the alert should be dismissed when the button is clicked.\n\n| Required | Type | Default |\n| -------- | --------- | ------- |\n| False | `boolean` | `true` |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `shouldHideModal`\n\nWhether the modal should be hidden when the button is clicked.\n\n| Required | Type | Default |\n| -------- | --------- | ------- |\n| False | `boolean` | `true` |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `text`\n\nThe text to display in the button.\n\n| Required | Type | Default |\n| -------- | -------- | ------- |\n| True | `string` | - |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `textButtonColor`\n\nThe color of the text variant button.\n\n| Required | Type | Default |\n| -------- | ---------------------------------- | --------------------------------------- |\n| False | `{ dark?: string, light: string }` | `{ dark: \"#00a2e8\", light: \"#00a2e8\" }` |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `textStyle`\n\nThe styles for the button text.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | --------------------------------------------------------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: \"white\" }, light: { color: \"white\" } }` |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `variant`\n\nThe type of button to render.\n\n- `\"regular\"` - A regular looking button.\n- `\"text\"` - A button that looks like a text link.\n\n| Required | Type | Default |\n| -------- | --------------------- | ----------- |\n| False | `\"regular\" \\| \"text\"` | `\"regular\"` |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n### ``\n\nThe modal cookie actions container that gives the user control over their\npreferences, which can accept these custom components:\n\n- ``\n\n#### `containerStyle`\n\nThe styles for the container of the modal cookie actions.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n### ``\n\nThe action to take in the modal that will perform a given action for a specific\ntype of cookie category (e.g. turn off cookies for analytics).\n\n#### `containerStyle`\n\nThe styles for the container of the action.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `description`\n\nThe description text to display.\n\n| Required | Type | Default |\n| -------- | -------- | ------- |\n| False | `string` | - |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `descriptionStyle`\n\nThe styles for the description text.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ----------------------------------------------------------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: \"white\" }, light: { color: \"#2D3748\" } }` |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `onSwitchToggle`\n\nHandles what happens when the switch is toggled.\n\n| Required | Type | Default |\n| -------- | ------------------------------- | ------- |\n| False | `(isSwitchOn: boolean) => void` | - |\n\n#### Example\n\n```jsx\n\n \n \n console.log('is on:', isSwitchOn)}\n />\n \n \n\n```\n\n---\n\n#### `switchDisabled`\n\nWhether the switch is disabled.\n\n| Required | Type | Default |\n| -------- | --------- | ------- |\n| False | `boolean` | `false` |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `switchToggledOffColor`\n\nThe color of the switch when it is off.\n\n| Required | Type | Default |\n| -------- | -------- | ----------- |\n| False | `string` | `\"#cbd5e0\"` |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `switchToggledOn`\n\nWhether the switch is toggled on by default.\n\n| Required | Type | Default |\n| -------- | --------- | ------- |\n| False | `boolean` | `true` |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `switchToggledOnColor`\n\nThe color of the switch when it is on.\n\n| Required | Type | Default |\n| -------- | -------- | ----------- |\n| False | `string` | `\"#0082ba\"` |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `title`\n\nThe title text to display.\n\n| Required | Type | Default |\n| -------- | -------- | ------- |\n| True | `string` | - |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n#### `titleStyle`\n\nThe styles for the title text.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ----------------------------------------------------------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: \"white\" }, light: { color: \"#2D3748\" } }` |\n\n#### Example\n\n```jsx\n\n \n \n \n \n \n\n```\n\n---\n\n### ``\n\nThe modal actions container that contains the Call-to-Action (CTA) buttons, such\nas for accepting or rejecting all cookies, which can accept these custom\ncomponents:\n\n- ``\n\n#### `containerStyle`\n\nThe styles for the container of the modal CTA actions.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n### ``\n\nThe footer of the modal, which can accept these custom components:\n\n- ``\n\n#### `containerStyle`\n\nThe styles for the container of the modal footer.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |\n\n#### Example\n\n```jsx\n\n \n\n```\n\n---\n\n### ``\n\nThis is the header text of the modal.\n\n#### `containerStyle`\n\nThe styles for the container of the header.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |\n\n#### Example\n\n```jsx\n\n \n\n```\n\n---\n\n#### `text`\n\nThe text to display as the header.\n\n| Required | Type | Default |\n| -------- | -------- | ------- |\n| True | `string` | - |\n\n#### Example\n\n```jsx\n\n \n\n```\n\n---\n\n#### `textStyle`\n\nThe styles for the header text.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ----------------------------------------------------------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: \"white\" }, light: { color: \"#2D3748\" } }` |\n\n#### Example\n\n```jsx\n\n \n\n```\n\n---\n\n### ``\n\nThe text used within the modal component.\n\n#### `containerStyle`\n\nThe styles for the container of the text.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n#### `text`\n\nThe text to display.\n\n| Required | Type | Default |\n| -------- | -------- | ------- |\n| True | `string` | - |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n#### `textStyle`\n\nThe styles for the text.\n\n| Required | Type | Default |\n| -------- | ------------------------------------------------------------ | ----------------------------------------------------------- |\n| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: \"white\" }, light: { color: \"#2D3748\" } }` |\n\n#### Example\n\n```jsx\n\n \n \n \n\n```\n\n---\n\n## Refs\n\n### ``\n\n#### `hide()`\n\nHides the alert.\n\n#### Example\n\n```tsx\nimport React from 'react';\nimport {\n CookiesConsentAlert,\n CookiesConsentAlertRef\n} from '@caish-cloud/react-cookies-consent';\n\nconst alertRef = React.useRef(null);\n\nReact.useEffect(() => {\n alertRef.current?.hide();\n}, [alertRef]);\n\nfunction ExampleComponent() {\n return ;\n}\n```\n\n---\n\n#### `show()`\n\nShows the alert.\n\n#### Example\n\n```tsx\nimport React from 'react';\nimport {\n CookiesConsentAlert,\n CookiesConsentAlertRef\n} from '@caish-cloud/react-cookies-consent';\n\nconst alertRef = React.useRef(null);\n\nReact.useEffect(() => {\n alertRef.current?.show();\n}, [alertRef]);\n\nfunction ExampleComponent() {\n return ;\n}\n```\n\n---\n\n### ``\n\n#### `hide()`\n\nHides the modal.\n\n#### Example\n\n```tsx\nimport React from 'react';\nimport {\n CookiesConsentModal,\n CookiesConsentModalRef\n} from '@caish-cloud/react-cookies-consent';\n\nconst modalRef = React.useRef(null);\n\nReact.useEffect(() => {\n modalRef.current?.hide();\n}, [modalRef]);\n\nfunction ExampleComponent() {\n return ;\n}\n```\n\n---\n\n#### `show()`\n\nShows the modal.\n\n#### Example\n\n```tsx\nimport React from 'react';\nimport {\n CookiesConsentModal,\n CookiesConsentModalRef\n} from '@caish-cloud/react-cookies-consent';\n\nconst modalRef = React.useRef(null);\n\nReact.useEffect(() => {\n modalRef.current?.show();\n}, [modalRef]);\n\nfunction ExampleComponent() {\n return ;\n}\n```\n\n## Troubleshooting\n\n### The alert disappeared and doesn't show anymore.\n\nIf you can't get the alert to display again, you will need to go into your\nbrowser's local storage settings, find the `react-cookies-consent/alert-dismissed`\nkey, and change the value to `false`. This is how we keep track of when the user\nsaved their preferences and do not need to be shown the alert anymore.\n\n## Contributing\n\nPlease read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of\nconduct and the process for submitting pull requests to us.\n\n## Learn More\n\nIf you want to learn more about cookie consent alerts and whether or not you need one,\ncheck out [this podcast episode](https://open.spotify.com/episode/5QXKqiADxBcBg11kDZvQ5b?si=JYgLbnYGRX2Mhm5loVJscQ)\nby Syntax and fast forward to 32:30.\n\n## Built With\n\n
\n \"React\n \"TypeScript\n \"Chakra\n \"Framer\n \"Zustand\n
\n\n
\n\nThe design concepts came from the implementation of BugSnag's cookies consent\nalert and modal. See it in action [here](https://docs.bugsnag.com).\n\n## Versioning\n\nWe use [Semantic Versioning 2.0.0](https://semver.org).\n\n## Authors\n\n

Timothy Caish

\n\n- Github: [@tcaish](https://github.com/tcaish)\n- Website: [https://timothy-caish.vercel.app](https://timothy-caish.vercel.app)\n\nSee the list of [contributors](https://github.com/caish-cloud/react-cookies-consent/contributors) who also participated in this project.\n\n## License\n\n[MIT License](LICENSE) Β© 2024 Caish Cloud, LLC\n","readmeFilename":"README.md"}