React-cookie-disclaimer NPM

react-cookie-disclaimer

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;