JSPM – react-cookie-banner@0.0.16

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 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,
                            target: React.PropTypes.oneOf(['_blank', '_self', '_parent', '_top', 'framename'])
                          }),
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,
styles:                   React.PropTypes.object, // override styles
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>

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.

react-cookie-banner

Package Exports

Readme

React Cookie Banner