Table of contents

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

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:

import CookieDisclaimer from 'react-cookie-disclaimer';

Then use the component in your application. For example:

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

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| |color|string|Sets the text color|#000| |cookiePolicyName|string|Sets the name of cookie policy link|Cookie Policy| |cookiePolicyText|string|Sets the text before the cookie policy link. It is recommended to set value because default text may change in future versions|By continuing to use the service, you agree to our use of cookies as described in the| |cookiePolicyLink|string|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|-| |text|string|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|This website uses cookies to improve service, for analytical and advertising purposes.| |closeIconSize|number|Sets the icon size to close the notification|28| |closeIconPositionTop|boolean|By default the icon for closing is displayed in the middle relative to the height of the notification and the value of this parameter is false. If set to true, the closing icon will be displayed on the top|false| |padding|number|Sets padding for cookie notification|20|

Custom content

You can place your own content in the notification. You should call the component as follows:

<CookieDisclaimer background='#000' color='#fff'>JSX custom content</CookieDisclaimer>

Custom styles

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

<CookieDisclaimer className={styles.cookieDisclaimer}>JSX custom content</CookieDisclaimer>

Example

import CookieDisclaimer from 'react-cookie-disclaimer';

const App = () => (
  <div className="app">
    ...
    <CookieDisclaimer 
      background='#0079c1' 
      bottomPosition={false}
      closeIconSize={30}
      closeIconPositionTop={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;

Contributing

Please read through our CONTRIBUTING.md.