React Cookie banner which can be automatically dismissed with a scroll. Because fuck The Cookie Law, that's why.
npm install react-cookie-banner 
A cookie banner for React that can be dismissed with a simple scroll. Because fuck the Cookie Law that's why.
(If you really want to annoy your users you can disable this feature but this is strongly discouraged!).
``jsx
import CookieBanner from 'react-cookie-banner';
React.renderComponent(
Install
npm install --save react-cookie-banner
or using
:`
yarn add react-cookie-banner
API
You can see 's props in its own README.mdStyle
react-cookie-banner comes with a nice default style made using inline-style.Of course, you can customize it as you like in several ways.
Based on how many changes you want to apply, you can style
react-cookie-banner as follows:$3
Why spending hours on the CSS when you have such a nice default style? :)In this case you can:
#### 1) Override the predefined inline-styles
In this example we change the message font-size and make the banner slightly transparent with the
styles prop:`jsx
banner: { backgroundColor: 'rgba(60, 60, 60, 0.8)' },
message: { fontWeight: 400 }
}}
message='...'
/>
` for a complete list of overridable style objects.#### 2) Beat it with good old CSS (or SASS)
The banner is structured as follows:
`jsx
{this.props.message}
Learn more
You can style every part of it using the appropriate
:`sass
.your-class-name.react-cookie-banner {
background-color: rgba(60, 60, 60, 0.8); .cookie-message {
font-weight: 400;
}
}
`$3
Your creative designer wants to change the style of the cookie banner completely?
Don't worry, we got your covered!If you need to re-style it, you can:
#### 1) Disable the default style and use your CSS
You may disable the default style by simply setting the prop
to true:`jsx
`Now you can re-style the cookie banner completely using your own CSS.
#### 2) Use your own cookie banner!
Don't like the layout either?
You can use your own custom cookie banner component by passing it as
and still let react-cookie-banner handle the hassle of managing cookies for you :)`jsx
{(onAccept) => (
)}
`Cookies manipulation
uses universal-cookie to manipulate cookies.You can import the
Cookies class and use it as follows:`js
import { Cookies } from 'react-cookie-banner'const cookies = new Cookies(/ Your cookie header, on browsers defaults to document.cookie /)
// simple set
cookie.set('test', 'a')
// complex set - cookie(name, value, ttl, path, domain, secure)
cookie.set('test', 'a', {
expires: new Date(2020-05-04)
path: '/api',
domain: '*.example.com',
secure: true
})
// get
cookies.get('test')
// destroy
cookies.remove('test', '', -1)
`Please refer to universal-cookie repo for more documentation.
Server side rendering (aka Universal)
supports SSR thanks to react-cookie.
If you want to support SSR, you should use the CookieProvider from react-cookie and the CookieBannerUniversal wrapper:`jsx
import { Cookies, CookiesProvider, CookieBannerUniversal } from 'react-cookie-banner'const cookies = new Cookies(/ Your cookie header, on browsers defaults to document.cookie /)
``