rcc

react-cookie-consent-notification

🍪 The package will help you display a notification of consent to the use of cookies on the site

Showing:

Popularity

Downloads/wk

7

GitHub Stars

5

Maintenance

Last Commit

6mos ago

Contributors

4

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

react-cookie-consent-notification

Version Build Coverage Minified size Downloads Dependabot PRs Welcome Tested with jest

Table of contents

Installation

You need to install package:

npm install react-cookie-consent-notification

You can use yarn:

yarn add react-cookie-consent-notification

Getting started

You should import the component:

import CookieConsent from 'react-cookie-consent-notification';

Then use the component in your application. You should call the component as follows:

<CookieConsent background={'#000'} color={'#fff'}>JSX custom content</CookieConsent>

The settings of the component

ParameterTypeDescriptionDefault
backgroundstringSets the notification background color in any format that supports css#fff
bottomPositionbooleanBy default notification is displayed at the top of the page. If set to true, the notification will be displayed at the bottomfalse
buttonTextstringSets the button textI agree
buttonBackgroundstringSets the button background color in any format that supports css#fff
buttonColorstringSets the button text color#000
buttonFontSizestringSets the button font size16
colorstringSets the text color#000
consentFunctionfunctionSets function to track the status of consent() => {}
paddingnumberSets padding for consent cookie notification20

Custom styles

You can also add custom styles by passing the className parameter:

<CookieConsent className={styles.CookieConsent} buttonClassName={styles.btn}>Your content</CookieConsent>

Example

import CookieConsent from 'react-cookie-consent-notification';

const checkStatus = (status) => {
  if(status) {
    // To set a cookies
  }
};

const App = () => (
  <div className="app">
    ...
    <CookieConsent 
      background={'#000'}
      bottomPosition={false}
      buttonText={'I agree'}
      buttonBackground={'#fff'}
      buttonColor={'#000'}
      buttonFontSize={16}
      color={'#fff'}
      consentFunction={checkStatus}
      padding={20}
    >
      This website uses cookies to improve service, for analytical and advertising purposes.
      Please read our <a href={'/cookies'} style={{ color: '#fff' }}>Cookie Policy</a>.
      Confirm your consent to the use of cookies.
    </CookieConsent>
  </div>
);
export default App;

Contributing

Please read through our CONTRIBUTING.md.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial