react-hook-consent

React consent management solution and banner for cookies, local storage, session storage and (external) scripts.

Demo

Check out the CodeSandbox for a working example.

Documentation

• Documentation

Features

• Provides the consent context to components
• Loads (external) scripts based on consent state
• Deletes cookies, local storage and session storage when consent declined
• Hook to retrieve and change the current consent
• Optional Banner with detailed settings to approve / decline consent
• Persists the selection to local storage
• Ready for Next.js
• Dark and light mode
• Styling via css

Installation

1yarn add react-hook-consent
2
3# or
4
5npm install react-hook-consent

Basic usage

Wrap the application in the ConsentProvider. Provide settings via the options prop. Optionally use the ConsentBanner component to display a consent banner to the user.

1/*
2 * index.tsx
3 */
4
5import { ConsentBanner, ConsentProvider } from 'react-hook-consent';
6
7// styling
8import 'react-hook-consent/dist/styles/style.css';
9
10// ...
11<ConsentProvider
12    options={{
13        services: [
14            {
15                id: 'myid',
16                name: 'MyName',
17                scripts: [
18                    { id: 'external-script', src: 'https://myscript.com/script.js' },
19                    { id: 'inline-code', code: `alert("I am a JavaScript code");` },
20                ],
21                cookies: [{ pattern: 'cookie-name' }, { pattern: /regex/ }],
22                localStorage: ['local-storage-key'],
23                sessionStorage: ['session-storage-key'],
24                mandatory: true,
25            },
26        ],
27        // customHash: 'my-custom-hash', // optional, e.g. when changing the options based on language
28        theme: 'light',
29    }}
30>
31    <App />
32    <ConsentBanner
33        settings={{ hidden: false, label: 'More', modal: { title: 'Modal title' } }}
34        decline={{ hidden: false, label: 'No' }}
35        approve={{ label: 'Yes' }}
36    >
37        <>
38            Can we use cookies and external services according to our <a href="test">privacy policy</a> to improve the
39            browsing experience?
40        </>
41    </ConsentBanner>
42</ConsentProvider>;
43// ...