react-cookienotice

A lightweight & customizable cookie banner for your React App

• 🍃 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

npm

npm i --save react-cookienotice

Yarn

yarn add react-cookienotice

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

Usage

import React from 'react'
import { CookieNotice } from 'react-cookienotice'
import 'react-cookienotice/dist/style.css'

const Example = () => <CookieNotice />

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

Troubleshooting

I'm using a SSR framework like Next.js and I have this error on build: document is not defined

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 :

import { CookieNotice } from 'react-cookienotice'
import 'react-cookienotice/dist/style.css'

export default function CookieBanner() {
  return <CookieNotice />
}

then you can import it wherever the component is used :

import dynamic from 'next/dynamic'

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

export default function Home() {
  return <CookieBanner />
}

License

MIT © xavierbriole

Credits

Built with Vite ⚡