Cookie CLI, Conduction Design System

— conduction.nl · cookie-consent — bash —

you@conduction.nl:~$ cat ./cookies.toml

# Pick what you're OK with. Essential cookies are required.

[1]✓essentialrequired
[2]✓analyticsopt-in
[3]☐preferencesopt-in
[4]☐marketingopt-in

React / MDX usage

Mount in MDX as `<CookieCli/>`

Self-managing privacy banner. Persists the user's choice in localStorage under conduction:cookie-cli. Re-renders only after a page calls window.ConductionCookieCli.reset(), so the prompt isn't sticky after a decision.

Import & example

import {CookieCli} from '@conduction/docusaurus-preset/components';

<CookieCli
  siteHost="conduction.nl"
  categories={[
    {key: 'essential',   label: 'essential',   tag: 'required', required: true,  defaultOn: true},
    {key: 'analytics',   label: 'analytics',   tag: 'opt-in',                    defaultOn: true},
    {key: 'preferences', label: 'preferences', tag: 'opt-in'},
    {key: 'marketing',   label: 'marketing',   tag: 'opt-in'},
  ]}
  onAccept={(selected) => {
    /* selected = {essential: true, analytics: true, preferences: false, marketing: false} */
    if (selected.analytics) loadPlausible();
  }}
/>

Keyboard shortcuts

A Accept all
S Save current selection
R Reject non-essential
1-9 Toggle category by number

Props

siteHost string in the prompt (default 'conduction.nl')
categories array of {key, label, tag?, required?, defaultOn?}
onAccept callback(selected => ...) on every save

Re-prompt

Privacy pages can call window.ConductionCookieCli.reset() to clear the stored choice and re-show the banner. window.ConductionCookieCli.get() returns the current selection (or null) for showing the choice somewhere on the privacy page.