@eisberg-labs/mui-next-cookie-consent

Mui Next Cookie Consent

React Material Ui cookie consent dialog, compatible with Nextjs cookies.

Installation

Prerequisites are:

• @mui/base
• tailwindcss configured

npm i --save @eisberg-labs/mui-next-cookie-consent

Usage

Just import the template with defaults:

<CookieConsent>This website uses cookies to enhance the user experience.</CookieConsent>

I use it in a nextjs app like this:

const CookieConsent = dynamic(() => import('@eisberg-labs/mui-next-cookie-consent'), {suspense: true});

export default function Layout({children}) {
  return (
    <>
      <AppHeader/>
      <div className={styles.wrapper}>{children}</div>
      <Suspense><CookieConsent
        cookieOptions={{
          expires: moment().add(1, 'years').toDate()
        }}
        confirmText="I agree"
      >This website uses cookies to enhance the user experience.</CookieConsent></Suspense>
      <Footer/>
    </>
  );
}

You can change the default styling, cookie key, set expires, register callback on Accept.

Api

Name	Type	Default	Description
defaultName	string	'CookieConsent'	Cookie key name for cookie consent
confirmText	React.ReactNode	'I understand'	Confirm button text
snackbarClassName	string	'fixed p-3 z-50 bottom-0'	snackbar class name
rootClassName	string	'rounded-lg bg-white shadow-2xl p-3'
buttonClassName	string	'bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow'
cookieOptions	CookieSerializeOptions	e.g. {expires: moment().add(1, 'days').toDate()}
onAccept	()=>void		Optional function that triggers after cookie consent accepted.

License

MIT © Eisberg Labs