https://github.com/rabelais88/consent-nextjs

cookie and private data consent management in Next.js with lightning-fast setup
https://github.com/rabelais88/consent-nextjs

compliance cookie cookie-consent cookie-consent-banner data-consent data-privacy gdpr next nextjs

Last synced: 19 days ago
JSON representation

cookie and private data consent management in Next.js with lightning-fast setup

• Host: GitHub
• URL: https://github.com/rabelais88/consent-nextjs
• Owner: rabelais88
• Created: 2024-05-11T10:43:23.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-05-19T22:34:33.000Z (6 months ago)
• Last Synced: 2024-10-10T05:37:04.626Z (about 1 month ago)
• Topics: compliance, cookie, cookie-consent, cookie-consent-banner, data-consent, data-privacy, gdpr, next, nextjs
• Language: TypeScript
• Homepage:
• Size: 374 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# consent-nextjs

- Cookie & Private Data Usage Consent Management System for Next.js.

- Aims to provide fastest way to setting it up.

- Developer experience oriented. Easy to modify.

- Provides React Store as controller.

# Caveat

- Next.js 14 currently has bugs regarding client component. It is encoraged to use nextjs canary version.

- 👨‍⚖️The legal compliance of the provided text may vary by country. It's best to use it only for quick initial deployment and verification, and afterward, it's a good idea to seek legal advice.

- Languages currently provided by the package: English(en-us), Korean(ko-kr), Japanese(ja-jp).

# Install

```

# all in one install

npm i consent-nextjs

# separate install

npm i @consent-nextjs/client @consent-nexjts/ui @consent-nextjs/lang

```

- `consent-nextjs`: all in one

- `@consent-nextjs/client`: nextjs provider, client hooks

- `@consent-nextjs/ui`: popup, banner UI

- `@consent-nextjs/lang`: languages

# Screenshot

## Popup UI

![popup screenshot](https://github.com/rabelais88/consent-nextjs/blob/main/consent-nextjs-screenshot-popup.png?raw=true)

## Banner UI

![banner screenshot](https://github.com/rabelais88/consent-nextjs/blob/main/consent-nextjs-screenshot-banner.png?raw=true)

# Get Started

```tsx

// --- consent.ts

'use client';

import { initUseConsent } from 'consent-nextjs';

// import { initUseConsent } from '@consent-nextjs/client';

export const { useConsent } = initUseConsent();

// --- components/Popup.tsx

import { PopupConsent, enUS } from 'consent-nextjs';

// import { enUS } from '@consent-nextjs/lang';

// import { PopupConsent } from '@consent-nextjs/ui/PopupConsent';

// import { BannerConsent } from '@consent-nextjs/ui/BannerConsent';

import { useConsent } from './consent';

const Popup = () => {

  const { consentState, onRejectClick, onConsentClick } = useConsent();

  const showPopup = consentState.consent === 'idle' && consentState.showPopup;

  if (!showPopup) return null;

  return (

    


      {enUS.title}}

        areaBottom={

          <>

            

              Privacy Policy

            

             onConsentClick()}>{enUS.buttonConsent}

             onRejectClick()}>{enUS.buttonReject}

          >

        }

      >

        {enUS.consentGeneral}

      

    

  );

};


export default Popup;

// --- components/ClientProvider.tsx

'use client';

import { ConsentProvider } from 'consent-nextjs';

// import { ConsentProvider } from '@consent-nextjs/client';

import dynamic from 'next/dynamic';

import Script from 'next/script';

import { PropsWithChildren } from 'react';

const Popup = dynamic(() => import('./Popup'), { ssr: false });

const ClientProvider = ({ children }: PropsWithChildren) => {

  return (

    

          

          

        >

      }

    >

      {children}

      

    

  );

};

export default ClientProvider;

// --- layout.tsx

// default theme, dark and light

import 'consent-nextjs/ui/style-popup.css';

import 'consent-nextjs/ui/style-overlay.css';

const Layout = () => {

  return (

    

      

        {children}

      

    

  );

};

```

# Alternative/Banner Style UI

```jsx

import { enUS } from '@consent-nextjs/lang';

import { BannerConsent } from 'consent-nextjs';

// import { BannerConsent } from '@consent-nextjs/ui/BannerConsent';

import { useConsent } from './consent';

const Popup = () => {

  const { consentState, onRejectClick, onConsentClick } = useConsent();

  const showPopup = consentState.consent === 'idle' && consentState.showPopup;

  if (!showPopup) return null;

  return (

    


      

             onConsentClick()}>{enUS.buttonConsent}

             onRejectClick()}>{enUS.buttonReject}

          >

        }

      >

        <>

          
{enUS.consentGeneral}

          Privacy Policy

        >

      

    

  );

};

```