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-consentUsage
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