npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-cookie-banner

v4.1.0

Published

React Cookie banner which can be automatically dismissed with a scroll. Because fuck The Cookie Law, that's why.

Downloads

7,403

Readme

Build Status

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!).

import CookieBanner from 'react-cookie-banner';

React.renderComponent(
  <div>
    <CookieBanner
      message="Yes, we use cookies. If you don't like it change website, we won't miss you!"
      onAccept={() => {}}
      cookie="user-has-accepted-cookies" />
  </div>,
  document.body
);

Live Examples

Install

npm install --save react-cookie-banner

or using yarn:

yarn add react-cookie-banner

API

You can see CookieBanner's props in its own README.md

Style

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:

You like the original style and you wish to make only a few modifications

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:

<CookieBanner
  styles={{
    banner: { backgroundColor: 'rgba(60, 60, 60, 0.8)' },
    message: { fontWeight: 400 }
  }}
  message='...'
/>

See src/styleUtils.ts for a complete list of overridable style objects.

2) Beat it with good old CSS (or SASS)

The banner is structured as follows:

<div className={this.props.className + ' react-cookie-banner'}
  <span className='cookie-message'>
    {this.props.message}
    <a className='cookie-link'>
      Learn more
    </a>
  </span>
  <button className='button-close'>
    Got it
  </button>
</div>

You can style every part of it using the appropriate className:

.your-class-name.react-cookie-banner {
  background-color: rgba(60, 60, 60, 0.8);

  .cookie-message {
    font-weight: 400;
  }
}

You need to heavily adapt the style to your application

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 disableStyle to true:

<CookieBanner disableStyle={true} />

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 children and still let react-cookie-banner handle the hassle of managing cookies for you :)

<CookieBanner>
  {(onAccept) => (
    <MyCustomCookieBanner {...myCustomProps} onAccept={onAccept} /> {/* rendered directly without any <div> wrapper */}
  )}
</CookieBanner>

Cookies manipulation

react-cookie-banner uses universal-cookie to manipulate cookies.

You can import the Cookies class and use it as follows:

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)

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:

import { Cookies, CookiesProvider, CookieBannerUniversal } from 'react-cookie-banner'

const cookies = new Cookies(/* Your cookie header, on browsers defaults to document.cookie */)

<CookiesProvider cookies={cookies}>
  <CookieBannerUniversal />
</CookiesProvider>