JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2916
  • Score
    100M100P100Q146884F
  • License ISC

Package Exports

  • react-cookie-banner

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-cookie-banner) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

message:                  React.PropTypes.string,
onAccept:                 React.PropTypes.func,
link:                     React.PropTypes.shape({
                            msg: React.PropTypes.string, // defaults to 'Learn more'
                            url: React.PropTypes.string.isRequired,
                          }),
buttonMessage:            React.PropTypes.string,
cookie:                   React.PropTypes.string, // defaults to 'accepts-cookie'
dismissOnScroll:          React.PropTypes.bool, // true by default!
dismissOnScrollThreshold: React.PropTypes.number, // defaults to 0
closeIcon:                React.PropTypes.string, // this should be the className of the icon. if undefined use button
disableStyle:             React.PropTypes.bool,
className:                React.PropTypes.string,
children:                 React.PropTypes.element // rendered in replacement without any <div> wrapper

Coming next:

shortMessage: React.PropTypes.string, // to be used with smaller screens

###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>

###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.