RendPro React Cookie Notice

A simple and customizable cookie notice bar for use in React websites.

Installation

  bun add @rendpro/react-cookie-notice

or

  npm install @rendpro/react-cookie-notice

or

  yarn add @rendpro/react-cookie-notice

How to use it

First, import the component and styles in your project.

import CookieNotice from "@rendpro/react-cookie-notice";
import "@rendpro/react-cookie-notice/styles";

Then you can use the component anywhere in you React application

<CookieNotice
  text={`This website uses cookies to improve and facilitate access to the website and to keep statistical data. Your continued use of
  using this site constitutes acceptance of this.`}
  buttonText="Accept"
  links={[
    { name: "Privacy Policy", link: "#" },
    { name: "How to disable cookie?", link: "#" },
    { name: "Cybersecurity", link: "#" },
  ]}
/>

Configuration

Prop	Type	Default value	Description
backgroundColor	string	rgb(26, 26, 24)	Banner background color
buttonBackgroundColor	string	rgb(231, 181, 46)	Button background color
buttonColor	string	rgb(26, 26, 24)	Button color
buttonText	string	Accept	Button text
className	string	undefined	ClassName for the banner. You can use it to override default styles
expires	number	Date	new Date().getDate() + 7
foregroundColor	string	rgb(168, 168, 168)	Banner text color
links	{ name: string; link: string; render?: React.FC<{ name: string; link: string; className: string; }> }[]	[{ name: "Privacy policy", link: "#" },{ name: "How to disable cookie?", link: "#" },{ name: "Cybersecurity", link: "#" }]	Links in banner. You can use render prop to render custom component instead of a <a> tag.
linksColor	string	rgb(231, 181, 46)	Banner links color
setCookie	boolean	true	Whether or not to set a cookie
text	string	This website uses cookies to improve and facilitate access to the website and to keep statistical data. Your continued use of using this site constitutes acceptance of this.	Banner text
onCookieSet	() => void	undefined	Runs when a cookie has been set
onHide	() => void	undefined	Runs when a cookie notice has been hidden

Example of using all the props

import React from "react";
import { BrowserRouter, Route, Link, Routes } from "react-router-dom";
import CookieNotice from "@rendpro/react-cookie-notice";
import "@rendpro/react-cookie-notice/styles";
import styles from './App.module.css';

const App = () => (
  <BrowserRouter>
    <Routes>
      <Route
        path="/"
        element={
          <CookieNotice
            links={[
              {
                name: "Privacy Policy",
                link: "/policy",
                render: (props) => (
                  <Link to={props.link} className={props.className}>
                    {props.name}
                  </Link>
                ),
              },
              {
                name: "How to disable cookies?",
                link: "#",
              },
              {
                name: "Cybersecurity",
                link: "#",
              },
            ]}
            buttonText="I Accept"
            text="This site uses cookies to improve and facilitate access to the service and for statistical data. Continuing to use this site implies acceptance of this state of affairs."
            backgroundColor="rgb(255, 255, 255)"
            foregroundColor="rgb(17, 27, 39)"
            buttonBackgroundColor="rgb(89, 180, 208)"
            buttonColor="rgb(255, 255, 255)"
            linksColor="rgb(89, 180, 208)"
            onCookieSet={() => console.log("cookie set")}
            onHide={() => console.log("is hide")}
            className={styles.wrapper}
          />
        }
      />
      <Route path="/" element={<h1>Index</h1>} />
      <Route path="/policy" element={<h1>Policy</h1>} />
    </Routes>
  </BrowserRouter>
);

export default App;

License

This package is distributed under the MIT License.