7.0.1 • Published 4 months ago

react-cookienotice v7.0.1

Weekly downloads
60
License
MIT
Repository
github
Last release
4 months ago

react-cookienotice

A lightweight & customizable cookie banner for your React App

Preview Light

npm npm@next coverage minzipped downloads storybook

  • 🍃 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/style'

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
KeyTypeDescriptionDefault value
acceptAllButtonLabelstringThe label for the accept all cookies button.Accept all (translated in browser language)
onAcceptAllButtonClickFunctionA callback function to be called when the accept all cookies button is clicked.-
declineAllButtonLabelstringThe label for the decline all cookies button.Decline all (translated in browser language)
onDeclineAllButtonClickFunctionA callback function to be called when the decline all cookies button is clicked.-
customizeButtonLabelstringThe label for the customize cookies button.Customize (translated in browser language)
customizeTitleLabelstringThe title for the customize view.Customize (translated in browser language)
servicesServiceObject[]List of services to be customized.-
acceptButtonLabelstringThe label for the accept button.Accept (translated in browser language)
onAcceptButtonClickFunctionA callback function to be called when the accept cookies button is clicked. The first param returns the checked services.-
backButtonLabelstringThe label for the back button.Back (translated in browser language)
alwaysActiveLabelstringThe label for the always active services.Always active (translated in browser language)
customizeAcceptAllButtonLabelstringThe label for the accept all button in the customize view.Accept all (translated in browser language)
customizeAcceptAllTimeoutnumberThe timeout for the accept all button in the customize view.1000
titleLabelstringThe title for the cookie banner.Cookie consent (translated in browser language)
descriptionLabelstringThe 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)
readMoreLabelstringThe label for the read more link.-
readMoreLinkstringThe link for the read more label.-
readMoreInNewTabbooleanWhether the read more link should open in a new tab.-
placementPlacementOptionsThe placement of the cookie banner.{ vertical: 'bottom', horizontal: 'left' }
cookieOptionsCookieOptionsCookie options.{ name: 'hide-notice', value: 'true', expires: 30, secure: false, httpOnly: false, sameSite: 'lax' }

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/style'

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

7.0.0

5 months ago

7.0.1

4 months ago

7.0.0-beta.6

5 months ago

7.0.0-beta.7

5 months ago

7.0.0-beta.5

6 months ago

7.0.0-beta.4

1 year ago

7.0.0-beta.3

1 year ago

7.0.0-beta.2

1 year ago

7.0.0-beta.1

1 year ago

7.0.0-beta.0

1 year ago

6.0.0-beta.7

2 years ago

6.0.1

2 years ago

6.0.0

2 years ago

6.0.3

2 years ago

6.0.2

2 years ago

6.0.0-beta.3

2 years ago

6.0.0-beta.4

2 years ago

6.0.0-beta.5

2 years ago

6.0.0-beta.1

2 years ago

6.0.0-beta.2

2 years ago

5.4.0

3 years ago

5.3.1

3 years ago

5.3.0

3 years ago

5.2.0

3 years ago

5.1.0

3 years ago

5.0.1

3 years ago

5.0.0

3 years ago

4.1.0

3 years ago

4.3.0

3 years ago

4.2.0

3 years ago

4.0.0

4 years ago

3.8.0

4 years ago

3.7.0

4 years ago

3.6.0

5 years ago

3.5.0

5 years ago

3.4.0

5 years ago

3.3.0

5 years ago

3.2.0

5 years ago

3.1.0

5 years ago

3.0.1

5 years ago

3.0.0

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.3.2

5 years ago

1.3.1

5 years ago

1.3.0

5 years ago

1.2.0

5 years ago

1.1.0

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago