@schlomoh/react-cookieconsent v1.6.1
React-cookieConsent
This react cookie consent library provides you with a fully customizable banner or modal
Installation π§π½βπ»
Install the component library using:
npm install @schlomoh/react-cookieConsent
Features β¨
- Two seperate components (modal and banner)
- Fully customizable via css
- Define custom text to inform the user
- Pass in callbacks for denial and acception
- Enable or disable cookie preferences
Preview π
Default cookie banner
Default cookie Modal
Usage / Examples βοΈ
You can either use the components right out of the box without setting any properties or completely customize either one of the consent components in your own taste.
Cookie modal π
Basic
import { CookieModal } from '@schlomoh/react-cookieConsent'
const MyApp = () => (
<>
<CookieBanner > // above the rest of the page
<MyPage />
</>
)
Cookie banner π
Basic
import { CookieBanner } from '@schlomoh/react-cookieConsent'
const MyApp = () => (
<>
<CookieModal > // above the rest of the page
<MyPage />
</>
)
Customized π
(All properties work for both modal and banner)
...
const Content = () => (
<>
<h3>I'm using cookies on my site.</h3>
<p>Bla Bla Bla this is my own informational text.</p>
</>
)
const containerStyle = {backgroundColor: '#333'};
const buttonStyle = {borderRadius: 0}
const primaryButtonStyle={...buttonStyle, backgroundColoe:'red'}
const secondaryButtonStyle={...buttonStyle, backgroundColoe:'blue'}
const MyApp = () => (
<>
<CookieBanner
acceptButtonText='I want it'
declineButtonText='Go away'
headingColor='white'
paragraphColor='grey'
containerStyle={containerStyle}
primaryButtonStyle={primaryButtonStyle}
secondaryButtonStyle={secondaryButtonStyle}
infoContent={<Content />}
/>
<MyPage />
</>
)
... it then looks like this (dont mind the textπ earlier screenshot):
Enabling cookie preferences π§
To let a visitor select their cookie preferences the property enableManagement
has to be set to true
.
You can then set an array of cookie categories which the user can select from. There is always the category "Necessary" predefined and set to true
and disabled
by default.
When enableManagement
is set you can also override the default text of the button by setting managementButtonText='whatever'
. This button is a secondary button.
For example
<>
<CookieBanner
enableManagement
managementButtonText='manage cookie preferences'
cookieCategories={['analytics', 'advertisement']}
/>
</>
Callbacks ππΌ
You can define callbacks which are called on either accept or decline. Simply pass a function into the onAccept
or onDecline
property which is executed accordingly.
The onAccept
event can pass an object with the selected cookies as ICookieObject
into your accept callback.
const onAccept = (cookies : ICookieObject) => {
console.log(cookies);
};
const onDecline = () => {
console.log('declined');
}
// inside your app
const MyApp = () => (
<>
<CookieBanner
onAccept={onAccept}
onDecline={onDecline}
/>
<>
)
Reference π
The ICookieObject
:
interface ICookieObject {
[key: string]: boolean;
}
Example:
{ "advertisement": false, "analytics": true }