Cookies management

Bootstrap 5 Cookies management plugin

This component is used to save in the browser data that we want to have access at the next user visit. For example how many times or when last time user visit our page.

Cookies management in the latest Bootstrap 5. Manage data stored in the browser memory. Thanks to the component, you can add, delete, get data and check their end time.

Note: Read the API tab to find all available options and advanced customization

Basic example

The Cookies Management Component provides methods to add, remove and get cookies

Set cookie

Use the function setItem() to add data to cookies. You can test this method using the example below. The button will call setItem(new Date()) and set a value to name provided in a hook declaration. To use this example again, press the reset button.

Show code

        
            
              import React from 'react';
              import { MDBBtn } from 'mdb-react-ui-kit';
              import { useMDBCookies } from 'mdb-react-cookies-management';
      
              export default function App() {
                const [val, { setItem, removeItem }] = useMDBCookies('first-visit', '');

                return (
                  <>
                    <MDBBtn onClick={() => setItem(new Date(), { expires: 1 })}>Set cookie</MDBBtn>
                    <MDBBtn onClick={removeItem}>reset cookie</MDBBtn>
          
                    <span>{val}</span>
                  </>
                );
              }

Get cookie

Your cookie value is saved in the first value returned from hook. If there's no such a key in your document cookies - this value will have the initial one passed as second parameter to the hook.

Show code

        
            
            const [val] = useMDBCookies('first-visit', '');

Remove cookie

When the data saved in cookies are no longer needed and you want to delete them, use removeItem function.

Show code

        
            
            const [val, { setItem, removeItem }] = useMDBCookies('first-visit', '');

Advanced example

Show Modal for new users

Using the showModalNewUser method you can display the modal for new users. Click start button to start simulate this behavior. After next click modal don't show any more until you click reset.

Show code

        
            
              import React from 'react';
              import {
                MDBBtn,
                MDBModal,
                MDBModalDialog,
                MDBModalContent,
                MDBModalHeader,
                MDBModalTitle,
                MDBModalBody,
                MDBModalFooter,
              } from 'mdb-react-ui-kit';
              import { useMDBCookies } from 'mdb-react-cookies-management';

              export default function App() {
                const [val, { setItem, removeItem }] = useMDBCookies('first-visit', '');
                const [isFirstVisit, { setItem: setIsFirstVisit }] = useMDBCookies('is-first-visit', true);
                const [firstVisitModal, setFirstVisitModal] = useState(false);

                const handleClick = () => {
                  if (isFirstVisit === 'true') {
                    setFirstVisitModal(true);
                    setIsFirstVisit(false, { expires: 1 });
                  }
                };

                return (
                  <section className='bg-white border rounded-5 w-100 p-4 d-flex justify-content-evenly'>
                    <MDBBtn onClick={handleClick}>Show modal</MDBBtn>
                    <MDBBtn onClick={() => setIsFirstVisit(true, { expires: 1 })}>Reset</MDBBtn>
                    <MDBModal show={firstVisitModal} getOpenState={(e: any) => setFirstVisitModal(e)} tabIndex='-1'>
                      <MDBModalDialog>
                        <MDBModalContent>
                          <MDBModalHeader>
                            <MDBModalTitle>This is modal for new user</MDBModalTitle>
                            <MDBBtn className='btn-close' color='none' onClick={() => setFirstVisitModal(false)}></MDBBtn>
                          </MDBModalHeader>
                          <MDBModalBody>This model will not appear again until you press the reset button.</MDBModalBody>
        
                          <MDBModalFooter>
                            <MDBBtn color='secondary' onClick={() => setFirstVisitModal(false)}>
                              Close
                            </MDBBtn>
                          </MDBModalFooter>
                        </MDBModalContent>
                      </MDBModalDialog>
                    </MDBModal>
                  </section>
                );
              }

Show modal after next visit

If you want to display the modal to the person who will visit the page again, you can use the showModalScoring method. Enter as a parameter the information after how many visits to the website the modal should appear. Click start button 3 times to test this feature.

Show code

        
            
              import React from 'react';
              import {
                MDBBtn,
                MDBModal,
                MDBModalDialog,
                MDBModalContent,
                MDBModalHeader,
                MDBModalTitle,
                MDBModalBody,
                MDBModalFooter,
              } from 'mdb-react-ui-kit';
              import { useMDBCookies } from 'mdb-react-cookies-management';

              export default function App() {
                const [val, { setItem, removeItem }] = useMDBCookies('first-visit', '');
                const [counterModal, setCounterModal] = useState(false);
                const [visitCounter, { setItem: setVisitCounter }] = useMDBCookies('visit-counter', 0);

                const handleVisitClick = () => {
                  setVisitCounter(Number(visitCounter) + 1, { expires: 1 });
              
                  if (Number(visitCounter) === 2) setCounterModal(true);
                };

                return (
                  <section className='bg-white border rounded-5 w-100 p-4 d-flex justify-content-evenly'>
                    <MDBBtn onClick={handleVisitClick}>Show modal</MDBBtn>
                    <MDBBtn onClick={() => setVisitCounter(0)}>Reset</MDBBtn>
                    <MDBModal show={counterModal} getOpenState={(e: any) => setCounterModal(e)} tabIndex='-1'>
                      <MDBModalDialog>
                        <MDBModalContent>
                          <MDBModalHeader>
                            <MDBModalTitle>This is modal for new user</MDBModalTitle>
                            <MDBBtn className='btn-close' color='none' onClick={() => setCounterModal(false)}></MDBBtn>
                          </MDBModalHeader>
                          <MDBModalBody>This model will not appear again until you press the reset button.</MDBModalBody>
        
                          <MDBModalFooter>
                            <MDBBtn color='secondary' onClick={() => setCounterModal(false)}>
                              Close
                            </MDBBtn>
                          </MDBModalFooter>
                        </MDBModalContent>
                      </MDBModalDialog>
                    </MDBModal>
                  </section>
                );
              }

Cookies management - API

Import

Show code

        
            
            import { useMDBCookies } from 'mdb-react-cookies-management';

Properties

useMDBCookies

Name	Type	Default	Description	Example
`value`	any	`''`	This value is returned from the hook. It contains the current value of item in cookies or an initial value.	`const [value, { setItem, removeItem }] = useMDBCookies('name', 'initialValue')`
`name`	String	`''`	A name for the key property in your cookies.	`const [value, { setItem, removeItem }] = useMDBCookies('name', 'initialValue')`
`initialValue`	any	`''`	An initial value for your hook if there's no such a one in your cookies.	`const [value, { setItem, removeItem }] = useMDBCookies('name', 'initialValue')`

Methods

Name	Type	Description	Example
`setItem`	Function	This method sets a value in the cookies using name provided in a hook.	`<MDBBtn onClick={() => setItem('test')}>Set value to test</MDBBtn>`
`removeItem`	Function	This method removes an item in the cookies with name provided in a hook.	`<MDBBtn onClick={removeItem}>Remove an item</MDBBtn>`