react-cookienotice

> A lightweight & customizable cookie banner for your React App

!Preview Light


- 🍃 No dependency, full self-made package (Bundlephobia)
- 📱 Mobile first & responsive
- ⚙️ Customizable with several props
- ⏱️ Very fast setup (less than 1 minute)
- 🧪 Tested with unit & functional tests
- 🌙 Dark mode based on system settings
- 🌎 Translated in Deutsch, English, Español, Français, Italiano, 한국인, Occitan & 中文 (create issue or submit pull request for more languages)

Install

$3

``bash
npm i --save react-cookienotice
`

$3

`bash
yarn add react-cookienotice
`

> If you're using a SSR framework like Next.js, see Troubleshooting section.

Usage

`tsx
import React from 'react'
import { CookieNotice } from 'react-cookienotice'
import 'react-cookienotice/style'

const Example = () =>

export default Example
`

Props

All props are optionals.

If you want a "Read More" link, you must set all of the following props:

- readMoreLabel
- readMoreLink
- readMoreInNewTab

| Key | Type | Description | Default value |
| ----------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| acceptAllButtonLabel | string | The label for the accept all cookies button. | Accept all (translated in browser language) |
| onAcceptAllButtonClick | Function | A callback function to be called when the accept all cookies button is clicked. | - |
| declineAllButtonLabel | string | The label for the decline all cookies button. | Decline all (translated in browser language) |
| onDeclineAllButtonClick | Function | A callback function to be called when the decline all cookies button is clicked. | - |
| customizeButtonLabel | string | The label for the customize cookies button. | Customize (translated in browser language) |
| customizeTitleLabel | string | The title for the customize view. | Customize (translated in browser language) |
| services | ServiceObject[] | List of services to be customized. | - |
| acceptButtonLabel | string | The label for the accept button. | Accept (translated in browser language) |
| onAcceptButtonClick | Function | A callback function to be called when the accept cookies button is clicked. The first param returns the checked services. | - |
| backButtonLabel | string | The label for the back button. | Back (translated in browser language) |
| alwaysActiveLabel | string | The label for the always active services. | Always active (translated in browser language) |
| customizeAcceptAllButtonLabel | string | The label for the accept all button in the customize view. | Accept all (translated in browser language) |
| customizeAcceptAllTimeout | number | The timeout for the accept all button in the customize view. | 1000 |
| titleLabel | string | The title for the cookie banner. | Cookie consent (translated in browser language) |
| descriptionLabel | string | The description for the cookie banner. | By clicking Accept, you consent to our website's use of cookies to provide you with the most relevant experience by remembering your cookie preferences. (translated in browser language) |
| readMoreLabel | string | The label for the read more link. | - |
| readMoreLink | string | The link for the read more label. | - |
| readMoreInNewTab | boolean | Whether the read more link should open in a new tab. | - |
| placement | PlacementOptions | The placement of the cookie banner. | { vertical: 'bottom', horizontal: 'left' } |
| cookieOptions | CookieOptions | Cookie options. | { name: 'hide-notice', value: 'true', expires: 30, secure: false, httpOnly: false, sameSite: 'lax' } |

Troubleshooting

$3

For SSR you need to import dynamically the module with next/dynamic using { ssr: false }. This prevents the component from being included on the server, and dynamically loads it on the client-side only.

Create a new file which include the CookieNotice component :

`tsx
import { CookieNotice } from 'react-cookienotice'
import 'react-cookienotice/style'

export default function CookieBanner() {
return
}
`

then you can import it wherever the component is used :

`tsx
import dynamic from 'next/dynamic'

const CookieBanner = dynamic(() => import('./cookie-banner'), { ssr: false })

export default function Home() {
return
}
``

License

MIT © xavierbriole

Credits

Built with Vite ⚡