The package will help you display a notification of consent to the use of cookies on the site
npm install react-cookie-consent-notification!react-cookie-consent-notification
bash
npm install react-cookie-consent-notification
`
You can use yarn:
bash
yarn add react-cookie-consent-notification
`
Getting started
You should import the component:
js
import CookieConsent from 'react-cookie-consent-notification';
`
Then use the component in your application. You should call the component as follows:
typescript jsx
JSX custom content
`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:
`typescript jsx
Your content
`Example
typescript jsx
import CookieConsent from 'react-cookie-consent-notification';const checkStatus = (status) => {
if(status) {
// To set a cookies
}
};
const App = () => (
...
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 Cookie Policy.
Confirm your consent to the use of cookies.
);
export default App;
``