bring-shrubbery / use-cookie-consent

Smol (~1kB gzipped) hook for managing GDPR cookie consent state.

Hey 👋👋👋

TLDR: You can also check out my CV here, or by running ssh cv.antoni.ai in your terminal

My name is Antoni, I make simple, scalable and maintainable software while trying to make it as open-source as possible.

This is my favourite professional stack core right now:

• TypeScript, Rust, Go
• Next.js, SvelteKit, Astro
• React Query + Zustand or Jotai
• tRPC / GraphQL / Server Components
• Prisma with Kysely + Planetscale/Neon/Aurora + Redis

Also, you here's a list of all of my open-source projects:

Stars	Name	About
	sp-hooks	State in your URL! Simple JavaScript hook to let you store state in URL Search Params easily.
	SVG-to-SwiftUI	Compiler + Web App to convert raw SVG code to SwiftUI Shape.
	use-cookie-consent	Headless JavaScript hook to simplify implementation of Cookie Consent banners.
	squircle-js	Squircle element for the web.
	quassum/SwiftUI-Tooltip	Tooltip utility for SwiftUI developers.
	easy-npm-package-react	Template to easily publish a React + TypeScript NPM package.

use-cookie-consent's Issues

Warning about peer dependency with react 17

Describe the bug
When installing in a react 17.x project there are warnings about the peer dependencies

To Reproduce
Steps to reproduce the behavior:

1. Create a project with react 17.x
2. add this library
3. install the dependencies
4. See warning

Expected behavior
This library should not complain about react 17.x

20:03:37.385 | warning " > [email protected]" has incorrect peer dependency "react@^16.9".
20:03:37.386 | warning " > [email protected]" has incorrect peer dependency "react-dom@^16.9".

Versions

use-cookie-consent: v0.1.12

Add package bundler

Is your feature request related to a problem? Please describe.
The code is currently only transpiled to JavaScript using TSC. It's not being minified, obfuscated, or optimized in any other way.

Describe the solution you'd like
Add package bundler like webpack or rollup (webpack would be my personal preference)

Describe alternatives you've considered
No reason not to add this, only benefits.

Support React 18

Support latest React 18 version as peer dependency.

This should be as easy as adding:

"peerDependencies": {
    "react": "^16.8 || ^17 || ^18"
  },

into package.json file.

Thanks in advance ✌️

Configure monorepo and merge other repos into this one

Is your feature request related to a problem? Please describe.

Currently, you have to go through a number of different repositories to release multiple packages. Since library-specific libraries are dependent on the core package, the library-specific libraries should be updated with a patch version and updated core library dependency automatically when the core package is updated with the patch version. When the core package is updated with minor or major versions, then an issue should be added automatically for each library-specific package to update it with matching functionality. Documentation can also be auto-generated on library updates.

Describe the solution you'd like

Monorepo solves all this by making the atomic updates easy. It also removes the need to jump around the different repos.

Describe alternatives you've considered

Turborepo seems to be the best solution when compared to Lerna and Nx. Nx provides better performance, but the configuration is much more complex.

Auto-detect version from release and auto-update it in the package.json

Is your feature request related to a problem? Please describe.

When creating a release, it's often annoying to set package.json version manually. This could be automated.

Describe the solution you'd like

The package.json version should be automatically set from the version that you set in the release.

Link from the readme 404s

From readme: you should use this (not yet done) package

The link it points to 404s

https://github.com/use-cookie-consent/use-cookie-consent-core/blob/main

Add Cypress tests

I want to check if Cookies are set correctly.

So far I have tried various Jest mocks, but could not get the results I expected.

Switch to TSUP from rollup

tsup both builds faster and requires less configuration to run

`allowChangingNecessary` missing from the typedefs for `acceptCookies` function

useCookieConsent.ts:

const acceptCookies = (newConsent: CookieConsent, options?: AcceptCookiesOptions) => {
  if (options?.allowChangingNecessary) {
    setConsent(newConsent)
  } else {
    setConsent({...newConsent, necessary: true});
  };
};

types.ts:

export interface CookieConsentHookActions {
  acceptCookies: (cookies: CookieTypes) => void;
  ...
}

Add a didAcceptPrivacyOptions

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
There's a function for checking if they accepted all or declined all, but leaves out whether they accepted some

Describe the solution you'd like
A clear and concise description of what you want to happen.
Add a didAcceptPrivacyOptions so a cookie banner wouldn't pop up again if they already made their selection

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Add a cookie-consent-provider

Is your feature request related to a problem? Please describe.

Feature: Cookie Consent Provider

As a Developer, I want to use a context, so that my application has global access to the consent state

Describe the solution you'd like

Add a CookieConsentProvider (react-context).

Describe alternatives you've considered

I made my own Provider/Context.

Feel free to reuse my code as is. It nicely extends your existing API and adds a new hook useCookieConsentProvider.

I could open a PR for this, but probably not any time soon, since I am currently fully stuffed with work.

Example: https://codesandbox.io/s/eager-tree-by1dk
Demo: https://by1dk.csb.app/

import React, { createContext, FC, useContext, useMemo } from "react";
import { CookieConsentHookState, useCookieConsent } from "use-cookie-consent";

export const CookieConsentContext = createContext<CookieConsentHookState>({
	consent: {},
	acceptCookies() {
		/**/
	},
	declineAllCookies() {
		/**/
	},
	acceptAllCookies() {
		/**/
	},
	didAcceptAll() {
		return false;
	},
	didDeclineAll() {
		return false;
	},
	cookies: {
		set() {
			return undefined;
		},
		get() {
			return "";
		},
		getAll() {
			return {};
		},
		getJSON() {
			/**/
		},
		getAllJSON() {
			return {};
		},
		remove() {
			/**/
		},
	},
});

export const CookieConsentProvider: FC = ({ children }) => {
	const {
		consent,
		acceptAllCookies,
		declineAllCookies,
		acceptCookies,
		didAcceptAll,
		didDeclineAll,
		cookies,
	} = useCookieConsent();

	const context = useMemo(
		() => ({
			consent,
			acceptAllCookies,
			declineAllCookies,
			acceptCookies,
			didAcceptAll,
			didDeclineAll,
			cookies,
		}),
		[
			consent,
			acceptAllCookies,
			declineAllCookies,
			acceptCookies,
			didAcceptAll,
			didDeclineAll,
			cookies,
		]
	);

	return (
		<CookieConsentContext.Provider value={context}>{children}</CookieConsentContext.Provider>
	);
};

export const useCookieConsentContext = () => useContext(CookieConsentContext);

Additional context
I use the provider like this

import React from "react";
import {useCookieConsentContext, CookieConsentProvider} from "./CookieConsent";

export const CookieBanner = () => {
  const {acceptAllCookies, declineAllCookies, acceptCookies} = useCookieConsentContext();

  return (
    <div>
      <button onClick={acceptAllCookies}>Accept all</button>
      <button onClick={() => acceptCookies({thirdParty: true})}>
        Accept third-party
      </button>
      <button onClick={() => acceptCookies({firstParty: true})}>
        Accept first-party
      </button>
      <button onClick={declineAllCookies}>Reject all</button>
    </div>
  );
};

export const Cookies = () => {
  const {consent} = useCookieConsentContext();

  return (
    <div>
      <div>
        {`Third-party cookies ${consent.thirdParty ? 'approved' : 'rejected'}`}
      </div>
      <div>
        {`First-party cookies ${consent.firstParty ? 'approved' : 'rejected'}`}
      </div>

    </div>
  );
};

export default function App() {
  return (

      <CookieConsentProvider>
        <CookieBanner/>
        <Cookies/>
      </CookieConsentProvider>
  );
}

Add support for `Storage` API

Is your feature request related to a problem? Please describe.
Currently there's no way of changing where consent is being stored, nor there is a way to manage multiple storage options.

Describe the solution you'd like
Add web Storage API support, which would allow using anything for storing consent, including LocalStorage, SessionStorage, or a custom implementation, you could even implement it to store it on a server.

Example usage from user's perspective

User should be able to write following code to save things into localStorage instead of cookies:

const data = useCookieConsent({
  storage: localStorage
});

Or following to save it in sessionStorage:

const data = useCookieConsent({
  storage: sessionStorage
});

Or a custom Storage:

const data = useCookieConsent({
  storage: {
    getItem: () => ...,
    setItem: () => ...,
    etc...
  }
});

Default Consent is not used

Describe the bug
The options.defaultConsent is not used.

Please review these lines:
https://github.com/bring-shrubbery/use-cookie-consent/blob/main/src/useCookieConsent.ts#L19-L21
https://github.com/bring-shrubbery/use-cookie-consent/blob/main/src/useCookieConsent.ts#L19-L21
https://github.com/bring-shrubbery/use-cookie-consent/blob/main/src/useCookieConsent.ts#L20

If the consent is not given an empty object is used. Therefore the defaultConsent from options will never be set.

  const initialConsent: CookieConsent =
    Cookies.getJSON(COOKIE_CONSENT_KEY) ?? EMPTY_CONSENT;

  const [consent, setConsent] = useState<CookieConsent>(
    initialConsent || options?.defaultConsent
  );

I noticed this when trying to add a server side defaultConsent into the provider described in #4

Use Case: Next.js

export const getServerSideCookieConsent = (
	context: GetServerSidePropsContext
): CookieConsent | null =>
	JSON.parse(context.req.cookies.USE_COOKIE_CONSENT_STATE ?? null) as CookieConsent;

As a workaround I adjusted my proposed Provider as follows:

export const CookieConsentProvider: FC<{ consent?: CookieConsent }> = ({
	children,
	consent: defaultConsent,
}) => {
	const {
		consent,
		acceptAllCookies,
		declineAllCookies,
		acceptCookies,
		didAcceptAll,
		didDeclineAll,
		cookies,
	} = useCookieConsent({ defaultConsent });

	const context = useMemo(
		() => ({
			consent: defaultConsent || consent,
			acceptAllCookies,
			declineAllCookies,
			acceptCookies,
			didAcceptAll,
			didDeclineAll,
			cookies,
		}),
		[
			consent,
			acceptAllCookies,
			declineAllCookies,
			acceptCookies,
			didAcceptAll,
			didDeclineAll,
			cookies,
			defaultConsent,
		]
	);

	return (
		<CookieConsentContext.Provider value={context}>{children}</CookieConsentContext.Provider>
	);
};

Usage:

import { CookieConsentProvider } from "path/to/my/cookie-consent-provider";
import React from "react";

const App = ({ Component, pageProps }) => {
  return (
      <CookieConsentProvider consent={pageProps.consent}>
        <Component {...pageProps} />
      </CookieConsentProvider>
  );
};

export default App;

Versions

use-cookie-consent: v0.1.12

Retire Github Package Registry publishing

Is your feature request related to a problem? Please describe.

GPR is neither commonly used nor a very easy platform to access. It's great for having your own corporate packages stored in your own account, but not for a public package which goal is to be used widely by everyone. Additionally it needs extra maintenance and often breaks.

Describe the solution you'd like

Remove GPR publishing

Describe alternatives you've considered

none

Add support for custom cookie categories

Is your feature request related to a problem? Please describe.
Currently, you can only use specified cookie categories that are derived from GDPR guidelines. Although this is good enough to satisfy GDPR, it's always good to have the ability to extend that.

Describe the solution you'd like
Allow users of the hook to create new category types.

Updated vulnerable dependencies.

As per Dependabot Alerts, there are two dependencies that make this repository vulnerable. You can find more info here.

These dependencies should be updated to latest versions.

Necessary cookies are not always set to `true`

Describe the bug

• When accepting just specific cookies, the necessary cookies are not set to true.
• The initial true value does not persist when using acceptCookies.

More info can be found here: #18

How to set the cookie as a persistent cookie?

Hi!
This is a great package, and really just what I needed for my cookie consent modal. However, I am unsure how to set the consent cookie as persistent?

Right now, If I use the function:

acceptCookies({
      necessary: true,
      preferences: false,
      statistics: true,
      marketing: false,
    });

It will set the cookie 'USE_COOKIE_CONSENT_STATE' as a session cookie. How do I set it as a persistent cookie (preferable with a 1 year expiration")?

Supported engines: npm

Describe the bug
Package "core" does not support npm?

To Reproduce
Steps to reproduce the behavior:

1. Install core or react package
2. Get following message from npm:

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@use-cookie-consent/[email protected]',
npm WARN EBADENGINE   required: { node: '>=12', npm: '<0', yarn: '^1' },
npm WARN EBADENGINE   current: { node: 'v14.18.1', npm: '8.1.1' }
npm WARN EBADENGINE }

Expected behavior
No message like this

Desktop (please complete the following information):

• OS: WSL on Windows 10

Additional context
Is there a reason for saying npm <0? Otherwise it seems to be easy to fix ;)