https://github.com/lukaskupczyk/react-hook-consent

React consent management solution for cookies and (external) scripts.
https://github.com/lukaskupczyk/react-hook-consent

consent consent-management hook hooks react react-hooks typescript

Last synced: 11 months ago
JSON representation

React consent management solution for cookies and (external) scripts.

• Host: GitHub
• URL: https://github.com/lukaskupczyk/react-hook-consent
• Owner: lukaskupczyk
• License: mit
• Created: 2022-12-26T21:25:08.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-29T21:38:24.000Z (over 2 years ago)
• Last Synced: 2025-06-12T02:52:26.919Z (about 1 year ago)
• Topics: consent, consent-management, hook, hooks, react, react-hooks, typescript
• Language: TypeScript
• Homepage: https://lukaskupczyk.github.io/react-hook-consent/
• Size: 1.71 MB
• Stars: 16
• Watchers: 2
• Forks: 5
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md
  • Security: SECURITY.md

Awesome Lists containing this project

README

          
![publish workflow](https://github.com/lukaskupczyk/react-hook-consent/actions/workflows/publish.yml/badge.svg)

[![Test Coverage](https://api.codeclimate.com/v1/badges/807f879a42c4aa48c475/test_coverage)](https://codeclimate.com/github/lukaskupczyk/react-hook-consent/test_coverage)

[![npm version](https://badge.fury.io/js/react-hook-consent.svg)](https://badge.fury.io/js/react-hook-consent)

[![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

# react-hook-consent

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

![react-hook-consent Screenshot](/assets/screenshot.png)

## Demo

Check out the [CodeSandbox](https://codesandbox.io/s/example-react18-7d1rcb) for a working example.

## Documentation

-   [Documentation](https://lukaskupczyk.github.io/react-hook-consent/)

## 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

```bash

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.

```typescript

/*

 * index.tsx

 */

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

// styling

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

// ...

    

    

        <>

            Can we use cookies and external services according to our privacy policy to improve the

            browsing experience?

        >

    

;

// ...

```