rendpro-react-cookie-notice v1.0.1

RendPro React Cookie Notice

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

Installation

  npm install rendpro-react-cookie-notice

or

  yarn add rendpro-react-cookie-notice

Using

import CookieNotice from "rendpro-react-cookie-notice";

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

Example of using all the props

import React from "react";
import { css } from "styled-components";
import CookieNotice from "rendpro-react-cookie-notice";
import { BrowserRouter, Route, Link } from "react-router-dom";

const App = () => (
  <>
    <BrowserRouter>
      <Route path="/">
        <CookieNotice
          links={[
            {
              name: "Privacy Policy",
              link: "/policy",
              customComponent: Link,
            },
            {
              name: "How to disable cookies?",
              link: "#",
            },
            {
              name: "Cybersecurity",
              link: "#",
            },
          ]}
          buttonText="Accept"
          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.`}
          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)"
          customStyles={css`
            & {
              box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            }
          `}
        />
      </Route>
      <Route path="/" exact>
        <h1>Index</h1>
      </Route>
      <Route path="/policy" exact>
        <h1>Policy</h1>
      </Route>
    </BrowserRouter>
  </>
);

export default App;

License

This package is distributed under the MIT License.