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);###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,
styles: React.PropTypes.object, // override styles
className: React.PropTypes.string,
children: React.PropTypes.element // rendered in replacement without any <div> wrapperComing 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
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent