React Cookie Banner

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

If you really want to annoy your users you can disable this feature (highly 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 Demo

More Examples

Install

npm install --save react-cookie-banner

API

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

Style

ReactCookieBanner by default uses its simple inline style. However you can easily disable it by passing

<CookieBanner disableStyle={true} />

In this case you can style it using css classes. 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>
  <div className='button-close'>
    Got it
  </div>
</div>

You can also pass your own CustomCookieBanner as child component which will be rendered in replacement:

<CookieBanner>
  <CustomCookieBanner {...myCustomProps} /> {/* rendered directly without any <div> wrapper */}
</CookieBanner>

Or you override the predefined inline-styles. This examples puts the message font back to normal weight and makes the banner slightly transparent:

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

See src/styleUtils.js for which style objects are availble to be overridden.

Cookie manipulation

ReactCookieBanner uses and exports the library browser-cookie-lite

You can import and use it as follows:

import {cookie} from 'react-cookie-banner';

// simple set
cookie("test", "a")
// complex set - cookie(name, value, ttl, path, domain, secure)
cookie("test", "a", 60*60*24, "/api", "*.example.com", true)
// get
cookie("test")
// destroy
cookie("test", "", -1)

Please refer to browser-cookie-lite repo for more documentation.