Table of contents

• Installation
• Getting started
• The settings of the component
• Custom styles
• Example
• Contributing

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

|Parameter|Type|Description|Default| |--------------------|--------|-----------|-------| |background|string|Sets the notification background color in any format that supports css|#fff| |bottomPosition|boolean|By default notification is displayed at the top of the page. If set to true, the notification will be displayed at the bottom|false| |buttonText|string|Sets the button text |I agree| |buttonBackground|string|Sets the button background color in any format that supports css|#fff| |buttonColor|string|Sets the button text color|#000| |buttonFontSize|string|Sets the button font size|16| |color|string|Sets the text color|#000| |consentFunction|function|Sets function to track the status of consent|() => {}| |padding|number|Sets padding for consent cookie notification|20|

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.