@cachho/react-hook-consent

Fork of react-hook-consent by Lukas Kupczyk.

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

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

If you are already using the original unmaintained react-hook-consent package, you can switch to this fork without changing any imports using npm's package alias feature:

npm install react-hook-consent@npm:@cachho/react-hook-consent

# or with yarn
yarn add react-hook-consent@npm:@cachho/react-hook-consent

Your package.json will show:

"react-hook-consent": "npm:@cachho/react-hook-consent@latest"

All existing imports continue to work unchanged:

import { ConsentProvider, useConsent } from 'react-hook-consent';

You could install it without the alias, but that just makes it harder to import or migrate.

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.

/*
 * index.tsx
 */

import { ConsentBanner, ConsentProvider } from '@cachho/react-hook-consent';

// styling
import '@cachho/react-hook-consent/dist/styles/style.css';

// ...
<ConsentProvider
    options={{
        services: [
            {
                id: 'myid',
                name: 'MyName',
                scripts: [
                    { id: 'external-script', src: 'https://myscript.com/script.js' },
                    { id: 'inline-code', code: `alert("I am a JavaScript code");` },
                ],
                cookies: [{ pattern: 'cookie-name' }, { pattern: /regex/ }],
                localStorage: ['local-storage-key'],
                sessionStorage: ['session-storage-key'],
                mandatory: true,
            },
        ],
        // customHash: 'my-custom-hash', // optional, e.g. when changing the options based on language
        theme: 'light',
    }}
>
    <App />
    <ConsentBanner
        settings={{ hidden: false, label: 'More', modal: { title: 'Modal title' } }}
        decline={{ hidden: false, label: 'No' }}
        approve={{ label: 'Yes' }}
    >
        <>
            Can we use cookies and external services according to our <a href="test">privacy policy</a> to improve the
            browsing experience?
        </>
    </ConsentBanner>
</ConsentProvider>;
// ...