react-cookie-consent-notification

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.