<GDPRConsentDialog>

<GDPRConsentDialog> is a stateful component used to manage the user's GDPR consent levels. Use this component to list the accepted levels and accept and/or reject additional levels.

Accessing the consent levels

If you need to access the stored consent levels, you can use the useGDPRConsent() hook.

Usage

<GDPRConsentDialog> can be rendered without passing in any props. The default settings will make the GDPR consent optional, as the user can dismiss the dialog without having to choose the consent levels.

import { GDPRConsentDialog } from "@slashid/react"

export default function Component() {
  return (
    <div>
      <div>Page content</div>
      <GDPRConsentDialog />
    </div>
  )
}

Demo with default options

Making GDPR consent mandatory

If you want to force the user to choose consent levels, you can set the forceConsent prop to true. Interaction with your app is blocked until consent is given.

import { GDPRConsentDialog } from "@slashid/react"

export default function Component() {
  return (
    <div>
      <div>Page content</div>
      <GDPRConsentDialog forceConsent />
    </div>
  )
}

With necessary cookies

If some cookies are necessary for the basic functionality of your app, you can use the necessaryCookiesRequired prop to disable the removal of necessary cookies in the expanded dialog.

import { GDPRConsentDialog } from "@slashid/react"

export default function Component() {
  return (
    <div>
      <div>Page content</div>
      <GDPRConsentDialog necessaryCookiesRequired />
    </div>
  )
}

Setting custom "accept all" and "reject all" consent levels

You can control which consent levels are stored when clicking on the "Accept all" and "Reject all" buttons by passing in the defaultAcceptAllLevels and defaultRejectAllLevels props.

import { GDPRConsentDialog } from "@slashid/react"

export default function Component() {
  return (
    <div>
      <div>Page content</div>
      <GDPRConsentDialog
        defaultAcceptAllLevels={["necessary", "marketing"]}
        defaultRejectAllLevels={["none", "necessary"]}
      />
    </div>
  )
}

Props

name	type	default	description
className?	string		Optional class name to be set on the dialog
triggerClassName?	string		Optional class name to be set on the button that opens the dialog
necessaryCookiesRequired?	boolean	false	Disable removal of necessary cookies in the expanded dialog
defaultAcceptAllLevels?	GDPRConsentLevel[]	All levels except none	Control what levels are accepted when clicking on Accept all
defaultRejectAllLevels?	GDPRConsentLevel[]	[none]	Control what levels are accepted when clicking on Reject all
forceConsent?	boolean	false	Disable interactions outside the dialog until consent levels have been stored
forceOpen?	boolean	false	Open the dialog initially even if consent levels have been stored
container?	HTMLElement | () => HTMLElement		Custom portal container element that the dialog portals into
onSuccess?	GDPRConsent[] => void		Called when storing consent levels is successful
onError?	Error => void		Called when storing consent levels fails

Interfaces

The following interfaces are being used in the hook's API:

• GDPRConsentLevel - a string representing a consent level
• GDPRConsent - an object with a timestamp when the consent level was accepted