Gathering detailed insights and metrics for react-cookie-banner
Gathering detailed insights and metrics for react-cookie-banner
Gathering detailed insights and metrics for react-cookie-banner
Gathering detailed insights and metrics for react-cookie-banner
@workday/canvas-kit-react-cookie-banner
Canvas styled cookie banner
@ashumenko/react-gdpr-cookie-banner
GDPR compliant cookie banner for react
react-consent-management-banner
Beautiful and Highly Customizable GDPR/ePrivacy React Consent and Cookie Management Library for React and Next.js
@palmabit/react-cookie-law
React Cookie banner GDPR compliance
React Cookie banner which can be automatically dismissed with a scroll. Because fuck The Cookie Law, that's why.
npm install react-cookie-banner
Typescript
Module System
Node Version
NPM Version
TypeScript (86.56%)
JavaScript (10.95%)
HTML (2.11%)
Shell (0.37%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
182 Stars
201 Commits
19 Forks
10 Watchers
1 Branches
24 Contributors
Updated on Mar 01, 2024
Latest Version
4.1.0
Package Id
react-cookie-banner@4.1.0
Size
16.03 kB
NPM Version
6.4.1
Node Version
10.15.3
Published on
Dec 11, 2019
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
28
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!).
1import CookieBanner from 'react-cookie-banner'; 2 3React.renderComponent( 4 <div> 5 <CookieBanner 6 message="Yes, we use cookies. If you don't like it change website, we won't miss you!" 7 onAccept={() => {}} 8 cookie="user-has-accepted-cookies" /> 9 </div>, 10 document.body 11);
npm install --save react-cookie-banner
or using yarn
:
yarn add react-cookie-banner
You can see CookieBanner
's props in its own README.md
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:
Why spending hours on the CSS when you have such a nice default style? :)
In this case you can:
In this example we change the message font-size and make the banner slightly transparent with the styles
prop:
1<CookieBanner 2 styles={{ 3 banner: { backgroundColor: 'rgba(60, 60, 60, 0.8)' }, 4 message: { fontWeight: 400 } 5 }} 6 message='...' 7/>
See src/styleUtils.ts
for a complete list of overridable style objects.
The banner is structured as follows:
1<div className={this.props.className + ' react-cookie-banner'} 2 <span className='cookie-message'> 3 {this.props.message} 4 <a className='cookie-link'> 5 Learn more 6 </a> 7 </span> 8 <button className='button-close'> 9 Got it 10 </button> 11</div>
You can style every part of it using the appropriate className
:
1.your-class-name.react-cookie-banner { 2 background-color: rgba(60, 60, 60, 0.8); 3 4 .cookie-message { 5 font-weight: 400; 6 } 7}
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:
You may disable the default style by simply setting the prop disableStyle
to true
:
1<CookieBanner disableStyle={true} />
Now you can re-style the cookie banner completely using your own CSS.
Don't like the layout either?
You can use your own custom cookie banner component by passing it as children
and still let react-cookie-banner
handle the hassle of managing cookies
for you :)
1<CookieBanner> 2 {(onAccept) => ( 3 <MyCustomCookieBanner {...myCustomProps} onAccept={onAccept} /> {/* rendered directly without any <div> wrapper */} 4 )} 5</CookieBanner>
react-cookie-banner
uses universal-cookie
to manipulate cookies.
You can import the Cookies
class and use it as follows:
1import { Cookies } from 'react-cookie-banner' 2 3const cookies = new Cookies(/* Your cookie header, on browsers defaults to document.cookie */) 4 5// simple set 6cookie.set('test', 'a') 7// complex set - cookie(name, value, ttl, path, domain, secure) 8cookie.set('test', 'a', { 9 expires: new Date(2020-05-04) 10 path: '/api', 11 domain: '*.example.com', 12 secure: true 13}) 14// get 15cookies.get('test') 16// destroy 17cookies.remove('test', '', -1)
Please refer to universal-cookie repo for more documentation.
react-cookie-banner
supports SSR thanks to react-cookie
.
If you want to support SSR, you should use the CookieProvider
from react-cookie
and the CookieBannerUniversal
wrapper:
1import { Cookies, CookiesProvider, CookieBannerUniversal } from 'react-cookie-banner'
2
3const cookies = new Cookies(/* Your cookie header, on browsers defaults to document.cookie */)
4
5<CookiesProvider cookies={cookies}>
6 <CookieBannerUniversal />
7</CookiesProvider>
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
Reason
Found 7/14 approved changesets -- score normalized to 5
Reason
project is archived
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
security policy file not detected
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More