React and React Router - A really very basic and simple Cookie Banner

Question

I'm working on React applications. I need a really very simple Cookie banner. The one that informs that the website uses cookies. There are various (theoretically simple) solutions in npm packages, but they all cause some problems in my projects. I have the impression that they are overdesigned, although they are supposed to be simple.

My projects mainly based on React with React Router.

Answer 1

OK. We have React and React Router (react-router-dom). And we need:

• react-cookie npm install react-cookie
• react-modal npm install react-modal
• bootstrap npm install bootstrap

ModalCookies.js component:

import React from 'react';
import {
    Link
} from 'react-router-dom';
import { useCookies } from "react-cookie";
import Modal from 'react-modal';
import '../modal.css';

function ModalCookies() {

    const [cookies, setCookie] = useCookies(["allowcookies"]);

    function handleCookie() {
        setCookie("allowcookies", true, { path: "/", expires: new Date(Date.now() + (100 * 24 * 60 * 60 * 1000)) });
    }

    function closeModal() {
        handleCookie();
    }

    return (
        <Modal isOpen={cookies.allowcookies ? false : true} className="Modal" overlayClassName="Overlay">
            <h6>PRIVACY & COOKIES POLICY</h6>
            <p className="text-justify">
                I use cookies to personalize content, ads and to analyze the traffic.
                I also share information about your use of my website with my social media,
                advertising and analytics partners who may combine it with other information that you have provided to them or that they have collected from your use of their services.
                If you continue browsing, it means that you accept the use of cookies on this website.
            </p>
            <div className="text-right">
                <button
                    className="btn btn-secondary mr-2 mb-2"
                    onClick={closeModal}>
                    OK
                </button>
                <Link to="/privacy"
                    className="btn btn-outline-secondary mb-2"
                    onClick={closeModal}>
                    Learn More
                </Link>
            </div>
        </Modal>
    );
}

export default ModalCookies;

modal.css file:

.Modal {
    position: absolute;
    top: auto;
    left: 15%;
    right: 15%;
    bottom: 15%;
    border: 1px solid rgb(100, 100, 100);
    background: rgb(255, 255, 255);
    outline: none;
    padding: 40px;
    z-index: 1;
  }

.Overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.60);
  }

The file that manages the main view of the application with React Router (for example: Home.js or App.js)(excerpt):

//...
import ModalCookies from './ModalCookies';
//...
  </Route>

 </Switch>

 <ModalCookies />

 <Footer />

</Router>
//...

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { CookiesProvider } from 'react-cookie';
import Modal from 'react-modal';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
Modal.setAppElement('#root');

ReactDOM.render(
  <React.StrictMode>
    <CookiesProvider>
      <App />
    </CookiesProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

It works very well in my projects. Any comments or questions are welcome.