react-consent-chaos

Enterprise-grade consent friction for modern web apps.

react-consent-chaos is a satirical React component library for teams that want their cookie banner to feel polished, persuasive, and vaguely audited. It is intentionally comedic, intentionally annoying, and implemented like a real package anyway.

Inspired by real-world experiences.

Features

• Prebuilt ConsentManagerFromHell modal with escalating reject flow
• Reusable ConsentStepButton for dark-pattern progression
• Optional useConsentEscalation hook for custom experiences
• TypeScript-first API with minimal dependencies
• Works in plain React apps and Next.js apps
• CSS-based styling with no Tailwind and no external UI kit
• Fake compliance copy, progress indicators, and deterministic preference sabotage

Install

npm install react-consent-chaos

Import the component and the bundled styles:

import { ConsentManagerFromHell } from "react-consent-chaos";
import "react-consent-chaos/styles.css";

Usage

import { useState } from "react";
import {
  ConsentManagerFromHell,
  type ConsentPreferences
} from "react-consent-chaos";
import "react-consent-chaos/styles.css";

export function App() {
  const [open, setOpen] = useState(true);

  const handleSavePreferences = (preferences: ConsentPreferences) => {
    console.log("preferences saved", preferences);
  };

  return (
    <ConsentManagerFromHell
      open={open}
      onOpenChange={setOpen}
      companyName="Synergy Harvest"
      hellMode="pushy"
      rejectDifficulty="absurd"
      allowRejectEventually
      onAcceptAll={() => console.log("Excellent. Your journey has been optimized.")}
      onRejectAll={() => console.log("Fine. We respect your persistence.")}
      onSavePreferences={handleSavePreferences}
    />
  );
}

API

ConsentManagerFromHell

Main parody consent modal with a small, typed API surface.

| Prop | Type | Default | Notes | | --- | --- | --- | --- | | open | boolean | - | Controlled open state | | defaultOpen | boolean | true | Uncontrolled initial state | | onOpenChange | (open: boolean) => void | - | Called when the modal opens or closes | | onAcceptAll | () => void | - | Fired after the user takes the easy path | | onRejectAll | () => void | - | Fired once persistence defeats bureaucracy | | onSavePreferences | (preferences: ConsentPreferences) => void | - | Fired after deterministic preference saving | | hellMode | "polite" \| "pushy" \| "comically-evil" | "pushy" | Controls tone and sabotage level | | rejectDifficulty | "annoying" \| "absurd" \| "nightmare" | "absurd" | Controls reject step count | | title | string | mode-based copy | Optional heading override | | description | string | mode-based copy | Optional body copy override | | companyName | string | "Consent Dynamics" | Brand label in header | | showVendorCount | boolean | true | Toggles fake vendor count display | | vendorCount | number | 1847 | Number shown in header | | initialPreferences | Partial<ConsentPreferences> | - | Initial toggle state | | allowRejectEventually | boolean | true | When false, rejection remains aspirational | | rejectStepsBeforeSuccess | number | difficulty-based | Overrides step count | | overlayClosable | boolean | false | Allows clicking outside or pressing Escape to close | | showProgressIndicator | boolean | true | Shows reject progression bar | | className | string | - | Applied to the dialog card |

ConsentStepButton

<ConsentStepButton
  step={2}
  totalSteps={5}
  onAdvance={() => {}}
  mode="pushy"
/>

Use this when you want your own layout but still want the familiar slow collapse of user autonomy.

useConsentEscalation

const escalation = useConsentEscalation({
  difficulty: "nightmare",
  mode: "comically-evil",
  allowRejectEventually: true
});

Returns:

• step
• totalSteps
• canReject
• statusMessage
• advanceRejectFlow()
• resetRejectFlow()

Demo

Run the demo locally:

npm install
npm run dev

The repository includes a small Vite demo in /Users/dmitrybondarchuk/Projects/my/react-consent-chaos/demo with:

• modal open button
• mode and difficulty switchers
• attempt counter
• final state display
• event log

FAQ

Is this serious?

No. The package is satire. The code quality is real, the compliance posture is performance art.

Why?

Because the modern web has accidentally invented a genre of UI that deserves a proper component library.

Does it work in Next.js?

Yes. It is a regular React package with peer dependencies and CSS you can import from your app entrypoint or component boundary.

Is it accessible?

Yes, within the stated comedic mission. Keyboard navigation, focus visibility, modal semantics, and live status messaging are included.

Why?

Some products have onboarding. Some have consent. Some have converted consent into a full-contact negotiation system. react-consent-chaos exists for design critique, conference demos, screenshots, and the quiet healing that comes from naming a thing accurately.

Absurd Use Cases

• Design-system demos that need one obviously cursed component
• Internal talks about manipulative UX
• Product ethics workshops with unusually good visual polish
• Satirical landing pages for fictional enterprise startups

Roadmap

• More compliance-adjacent euphemisms
• Banner mode for teams that prefer horizontal disappointment
• Additional locale support once legal approves the jokes
• Analytics on how often users choose dignity over convenience