3.5.3 • Published 2 months ago
react-hook-consent v3.5.3
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
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>;
// ...
3.5.3
2 months ago
3.4.0
7 months ago
3.5.2
5 months ago
3.5.1
7 months ago
3.5.0
7 months ago
3.3.0
12 months ago
3.2.0
1 year ago
3.0.2
1 year ago
3.1.0
1 year ago
3.0.1
1 year ago
3.0.0
1 year ago
2.2.0
1 year ago
2.1.1
1 year ago
2.0.0-beta.0
1 year ago
2.1.0
1 year ago
2.0.0
1 year ago
1.0.0
1 year ago
1.0.0-beta.4
1 year ago
1.0.0-beta.3
1 year ago
1.0.0-beta.2
1 year ago
1.0.0-beta.1
1 year ago
1.0.0-beta.0
1 year ago