react-cookie-disclaimer

Table of contents

• Installation
• Getting started
• The settings of the component
• Example

Installation

You need to install package.

npm install react-cookie-disclaimer

You can use yarn.

yarn add react-cookie-disclaimer

Getting started

You should import the component and css file

import CookieDisclaimer from 'react-cookie-disclaimer';
import 'react-cookie-disclaimer/dist/css/main.css';

Then use the component in your application. For example:

<CookieDisclaimer background='#0079c1' color='#fff' cookiePolicyLink='/cookie-policy' />

The settings of the component

background

Sets the color for the background in any format that supports css.

<CookieDisclaimer background='#0079c1' />

Default value: #fff

bottomPosition

By default, the notification is displayed at the top of the page and the value of this parameter is false. If set to true, the notification will be displayed at the bottom.

<CookieDisclaimer bottomPosition={true} />

color

Sets the color of the text and the cross to close.

<CookieDisclaimer bottomPosition='#fff' />

Default value: #000

cookiePolicyName

Sets the name for the cookie policy link

<CookieDisclaimer cookiePolicyName='our Cookie Policy' />

Default value: Cookie Policy

cookiePolicyText

Sets the text before the cookie policy link. It is recommended to set value because default text may change in future versions.

<CookieDisclaimer cookiePolicyText='Please read' />

Default value: By continuing to use the service, you agree to our use of cookies as described in the

cookiePolicyLink

Link to your cookie policy. If the link value is not set, the link with the name (cookiePolicyName) and the text before the link (cookiePolicyText) will not be displayed.

<CookieDisclaimer cookiePolicyLink='/cookie-policy' />

text

This is the main text that will be displayed in the notification. It is recommended to set value because default text may change in future versions.

<CookieDisclaimer text='This website uses cookies to improve service.' />

Default value: This website uses cookies to improve service, for analytical and advertising purposes.

Example

import CookieDisclaimer from 'react-cookie-disclaimer';
import 'react-cookie-disclaimer/dist/css/main.css';

const App = () => (
  <div className="app">
    ...
    <CookieDisclaimer 
        background='#0079c1' 
        bottomPosition={false}
        color='#fff'
        cookiePolicyName='Cookie Policy'
        cookiePolicyLink='/cookie-policy' 
        cookiePolicyText='By continuing to use the service, you agree to our'
        text='This website uses cookies to improve service.'
    />
  </div>
);
export default App;