Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/use-cookie-consent/use-cookie-consent-react
Tiny (<2kB) useCookieConsent hook for React apps
https://github.com/use-cookie-consent/use-cookie-consent-react
cookie cookies gdpr hook react reactjs
Last synced: 2 months ago
JSON representation
Tiny (<2kB) useCookieConsent hook for React apps
- Host: GitHub
- URL: https://github.com/use-cookie-consent/use-cookie-consent-react
- Owner: use-cookie-consent
- License: mit
- Created: 2021-10-02T16:01:32.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-18T21:14:14.000Z (almost 2 years ago)
- Last Synced: 2024-10-01T07:47:01.809Z (3 months ago)
- Topics: cookie, cookies, gdpr, hook, react, reactjs
- Language: JavaScript
- Homepage: https://use-cookie-consent.js.org/packages/react
- Size: 797 KB
- Stars: 29
- Watchers: 0
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# useCookieConsent hook for React.js
[](https://github.com/use-cookie-consent/use-cookie-consent-react/actions)
[](https://www.npmjs.com/package/@use-cookie-consent/react)
[](https://www.npmjs.com/package/@use-cookie-consent/react)
[](https://github.com/use-cookie-consent/use-cookie-consent-react/actions/workflows/codecov.yml)
[](https://unpkg.com/@use-cookie-consent/react@latest/build/index.es.js)
[](https://github.com/use-cookie-consent/use-cookie-consent-react/blob/main/LICENSE)
[](https://www.buymeacoffee.com/bring.shrubbery)
> Headless state management for GDPR cookie consent
- **Headless** - bring your own styles, we will provide the logic.
- **Hook-based** - extremely intuitive for React developers.
- **React Context support** - wrap your app in a provider and synchronse UI updates across the app.
- **Tiny** - less than `2kB` gzipped.
## Description
This package provides a wrapper around [`@use-cookie-consent/core`](https://github.com/use-cookie-consent/use-cookie-consent-core) package to provide best experience for React applications. Namely, it provides a React context, which provides all the functionality of [core](https://github.com/use-cookie-consent/use-cookie-consent-core) package but with reactive updates.
## Installation
```bash
npm install @use-cookie-consent/react
```
or
```bash
yarn add @use-cookie-consent/react
```
## Usage
### Basic usage
The first step to this setup is to wrap your app in the `CookieConsentProvider`:
```jsx
import { CookieConsentProvider } from '@use-cookie-consent/react'
export default function App() {
return {
...
}
}
```
Then you can read and update the cookie consent data from any component which is inside of the ``. Both components you see below are not connected to each other in any way except the `useCookieConsentContext` function. You would put both of them separately somewhere in your app WITHOUT connecting them by any callbacks or passing state through props.
```jsx
// This component is an example of a component that you use to
// accept/decline cookie consent, without reading any data.
const CookieBanner = () => {
const { acceptAllCookies, declineAllCookies, acceptCookies } =
useCookieConsentContext();
return (
Accept all
acceptCookies({ thirdParty: true })}>
Accept third-party
acceptCookies({ firstParty: true })}>
Accept first-party
Reject all
);
};
```
```jsx
// This component is an example of a component which would show
// the state of the cookie consent, without updating anything.
const CookiesPreview = () => {
const { consent } = useCookieConsentContext();
return (
{`Third-party cookies ${consent.thirdParty ? 'approved' : 'rejected'}`}
{`First-party cookies ${consent.firstParty ? 'approved' : 'rejected'}`}
);
};
```
Thanks to [@pixelass](https://github.com/pixelass) for prividing the examples you see above.
## Contributors
- [Antoni Silvestrovic](https://github.com/bring-shrubbery)
- [Gregor Adams](https://github.com/pixelass)
## Discussions and Questions
For non-issues please consider joining our Discord [here](https://discord.gg/pa8epvzJbb)!
## License
[MIT](https://github.com/use-cookie-consent/use-cookie-consent-react/blob/main/LICENSE)