Skip to content

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

License

Notifications You must be signed in to change notification settings

RendPro/react-cookie-notice

Repository files navigation

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.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published