Cookie Hell

A nested cookie consent dialog with deeply nested toggles that randomly flip, and a microscopic reject button.

Test Your AI See this pattern in action in Level 1: Cookie Consent Hell
Try Level 1

Demo

Try to disable all cookies and save your preferences

React

React
1.import { CookieHell } from 'anti-ai-ui';
2.

3.function App() {
4.  return (
5.    <CookieHell
6.      categoryCount={5}
7.      partnersPerCategory={8}
8.      onAcceptAll={() => console.log('Tracked!')}
9.      onSavePreferences={() => console.log('Preferences ignored!')}
10.    />
11.  );
12.}

Custom Components

Custom Components
1.import { CookieHell } from 'anti-ai-ui';
2.import { MyButton, MyCategory } from './MyComponents';
3.

4.function App() {
5.  return (
6.    <CookieHell
7.      categoryCount={5}
8.      partnersPerCategory={8}
9.      renderAcceptButton={({ onClick }) => (
10.        <MyButton onClick={onClick} variant="success">
11.          Accept All
12.        </MyButton>
13.      )}
14.      renderSaveButton={({ onClick }) => (
15.        <MyButton onClick={onClick} variant="ghost" size="tiny">
16.          Save
17.        </MyButton>
18.      )}
19.      renderCategory={({ category, isExpanded, onToggleExpand, onToggleCategory, onTogglePartner }) => (
20.        <MyCategory
21.          name={category.name}
22.          description={category.description}
23.          enabled={category.enabled}
24.          expanded={isExpanded}
25.          onToggle={onToggleCategory}
26.          onExpand={onToggleExpand}
27.          partners={category.partners}
28.          onPartnerToggle={onTogglePartner}
29.        />
30.      )}
31.      onAcceptAll={() => console.log('Tracked!')}
32.    />
33.  );
34.}

Vanilla JS

Vanilla JS
1.import { makeCookieHell } from 'anti-ai-ui/vanilla';
2.

3.const container = document.getElementById('container');
4.

5.const { destroy } = makeCookieHell({
6.  container,
7.  categoryCount: 5,
8.  partnersPerCategory: 8,
9.  onAcceptAll: () => console.log('Tracked!'),
10.  onSavePreferences: () => console.log('Preferences ignored!')
11.});
12.

13.// Call destroy() to remove

Props

Prop Type Default Description
categoryCount number 5 Number of cookie categories to display
partnersPerCategory number 8 Number of partners per category
rejectButtonSize number 16 Size of the save preferences button in pixels
onAcceptAll function undefined Callback when Accept All is clicked
onSavePreferences function undefined Callback when Save Preferences is clicked (toggles randomly re-enable)
renderAcceptButton (props: RenderAcceptButtonProps) => ReactNode undefined Custom render function for the Accept All button
renderSaveButton (props: RenderSaveButtonProps) => ReactNode undefined Custom render function for the Save Preferences button
renderCategory (props: RenderCategoryProps) => ReactNode undefined Custom render function for each cookie category