@softisfy/cookies

A GDPR compliant cookies component for React

Install

yarn add @softisfy/cookies

Use

Check the example directory for a full working example.

import CookiesDialog from '@softisfy/cookies';
import '@softisfy/cookies/dist/index.css';

const App = () => {
	return (
		<CookiesDialog
			toggle="![Cookie](/cookie.svg)"
			title="This website uses cookies"
			description="
					We use cookies to provide social media features and to analyse our traffic. 
					We also share information about your use of our site with our 
					social media and analytics partners who may combine it with other
					information that you've provided to them. [Learn more](/).
				"
			controls={{
				all: 'Accept all cookies',
				selected: 'Accept selected cookies'
			}}
			types={[
				{
					id: 'necessary',
					label: 'Necessary',
					disabled: true,
					checked: true,
					scripts: [
						{
							location: 'head',
							src: '/scripts/script-A.js'
						}
					]
				},
				{
					id: 'analytics',
					label: 'Analytics',
					scripts: [
						{
							location: 'body',
							src: '/scripts/script-B.js'
						}
					]
				},
				{
					id: 'marketing',
					label: 'Marketing',
					scripts: [
						{
							location: 'head',
							src: '/scripts/script-C.js'
						}
					]
				}
			]}
		/>
	);
};

Customize

For this part, you have three options:

1. Use the default stylesheet provided by the library. Example:

import '@softisfy/cookies/dist/index.css';

2. Override the default stylesheet with your own properties. (Optional) Example:

:root {
	--stf-cookies-primary-color: #444c56;
	--stf-cookies-border-color: #444c56;
	--stf-cookies-dark-color: #adbac7;
	--stf-cookies-light-color: #22272e;
	--stf-cookies-border-radius: 4px;
	--stf-cookies-font-size: 13px;
	--stf-cookies-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

3. Use your own stylesheet. (Optional)

License

MIT © Softisfy