react-hook-consent
TypeScript icon, indicating that this package has built-in type declarations

3.5.3 • Public • Published

publish workflow Test Coverage npm version MIT License

react-hook-consent

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

react-hook-consent Screenshot

Demo

Check out the CodeSandbox for a working example.

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

yarn add react-hook-consent

# or

npm 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.

/*
 * index.tsx
 */

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

// styling
import '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>;
// ...

Package Sidebar

Install

npm i react-hook-consent

Weekly Downloads

694

Version

3.5.3

License

MIT

Unpacked Size

227 kB

Total Files

52

Last publish

Collaborators

  • lukaskupczyk