React-cookie-consent-notification NPM

react-cookie-consent-notification

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;