Skip to content
SlashClone
DiscoverUse in ClaudeSubmit a link
Sign in
Made by@slashclone

Cookie consent banner

@slashclone/cookie-consent-banner

Add an honest cookie banner to a web app: analytics, ad pixels, and video embeds load only after a yes, and saying no is one click. One registry of every cookie and service drives the banner, the loaders, the CSP, and the privacy page's cookie table. Includes a registry checker and React templates.

SkillDevOpsv0.1.0 (latest)Tested
Use in Claude Save Like Clone Comment
Activity
New: be the first to try it
  1. 1"use client";
  2. 2
  3. 3/**
  4. 4 * A cookie banner and settings dialog for React. No dependencies beyond React.
  5. 5 * Props: the configured services (from your registry) and a loader that starts the
  6. 6 * trackers a choice allows. Style the class names to match your site.
  7. 7 */
  8. 8import { useEffect, useRef, useState } from "react";
  9. 9import {
  10. 10 CATEGORIES,
  11. 11 CONSENT_COOKIE,
  12. 12 CONSENT_MAX_AGE_SECONDS,
  13. 13 clearMatching,
  14. 14 effectiveConsent,
  15. 15 gpcOn,
  16. 16 parseConsent,
  17. 17 serializeConsent,
  18. 18 type Category,
  19. 19 type ConsentChoice,
  20. 20} from "./consent";
  21. 21
  22. 22export interface ServiceSummary {
  23. 23 id: string;
  24. 24 name: string;
  25. 25 category: Category;
  26. 26 /** Cookies and storage keys to delete when its category is turned off. */
  27. 27 clear?: RegExp;
  28. 28}
  29. 29
  30. 30const COPY: Record<Category, { title: string; body: string }> = {
  31. 31 analytics: { title: "Analytics", body: "Tells us which pages help, so we know what to build." },
  32. 32 advertising: { title: "Advertising", body: "Lets ad platforms count sign-ups from our ads." },
  33. 33 media: {
  34. 34 title: "Embedded videos",
  35. 35 body: "Plays videos from other sites, which may set cookies.",
  36. 36 },
  37. 37};
  38. 38
  39. 39export const OPEN_CONSENT_EVENT = "consent:open";
  40. 40
  41. 41function readStored(): ConsentChoice | null {
  42. 42 const part = document.cookie.split("; ").find((c) => c.startsWith(`${CONSENT_COOKIE}=`));
  43. 43 return parseConsent(part?.slice(CONSENT_COOKIE.length + 1));
  44. 44}
  45. 45
  46. 46export function ConsentBanner({
  47. 47 services,
  48. 48 onChoice,
  49. 49 policyHref = "/privacy#cookies",
  50. 50}: {
  51. 51 services: ServiceSummary[];
  52. 52 /** Load whatever the choice allows. Called on page load with a stored choice, and on save. */
  53. 53 onChoice: (choice: ConsentChoice) => void;
  54. 54 policyHref?: string;
  55. 55}) {
  56. 56 const [choice, setChoice] = useState<ConsentChoice | null>(null);
  57. 57 const [asking, setAsking] = useState(false);
  58. 58 const [gpc, setGpc] = useState(false);
  59. 59 const dialog = useRef<HTMLDialogElement>(null);
  60. 60 const ids = services.map((s) => s.id);
  61. 61 const idsKey = ids.join(",");
  62. 62
  63. 63 useEffect(() => {
  64. 64 setGpc(gpcOn());
  65. 65 const stored = effectiveConsent(readStored(), idsKey ? idsKey.split(",") : [], gpcOn());
  66. 66 setChoice(stored);
  67. 67 if (stored) onChoice(stored);
  68. 68 else setAsking(services.length > 0);
  69. 69 // onChoice and services are read once per set of service ids.
  70. 70 // eslint-disable-next-line react-hooks/exhaustive-deps
  71. 71 }, [idsKey]);
  72. 72
  73. 73 useEffect(() => {
  74. 74 const open = () => dialog.current?.showModal();
  75. 75 window.addEventListener(OPEN_CONSENT_EVENT, open);
  76. 76 return () => window.removeEventListener(OPEN_CONSENT_EVENT, open);
  77. 77 }, []);
  78. 78
  79. 79 const save = (next: Record<Category, boolean>) => {
  80. 80 const saved: ConsentChoice = {
  81. 81 v: 1,
  82. 82 ...next,
  83. 83 advertising: gpcOn() ? false : next.advertising,
  84. 84 s: ids,
  85. 85 at: Date.now(),
  86. 86 };
  87. 87 const secure = location.protocol === "https:" ? "; Secure" : "";
  88. 88 document.cookie = `${CONSENT_COOKIE}=${serializeConsent(saved)}; Path=/; Max-Age=${CONSENT_MAX_AGE_SECONDS}; SameSite=Lax${secure}`;
  89. 89 setAsking(false);
  90. 90 const revoked = choice ? CATEGORIES.filter((c) => choice[c] && !saved[c]) : [];
  91. 91 if (revoked.length > 0) {
  92. 92 for (const s of services) if (s.clear && revoked.includes(s.category)) clearMatching(s.clear);
  93. 93 location.reload(); // A loaded script cannot be unloaded.
  94. 94 return;
  95. 95 }
  96. 96 setChoice(saved);
  97. 97 onChoice(saved);
  98. 98 };
  99. 99 const all = (value: boolean) => save({ analytics: value, advertising: value, media: value });
  100. 100 const present = CATEGORIES.filter((c) => services.some((s) => s.category === c));
  101. 101
  102. 102 return (
  103. 103 <>
  104. 104 {asking ? (
  105. 105 <section aria-label="Cookie choices" className="consent-banner">
  106. 106 <h2>Your cookie choices</h2>
  107. 107 <p>
  108. 108 We use optional cookies for {present.map((c) => COPY[c].title.toLowerCase()).join(", ")}
  109. 109 . The site works either way, and you can change this any time from Cookie settings.{" "}
  110. 110 <a href={policyHref}>What we use</a>
  111. 111 </p>
  112. 112 {/* Reject and Accept look the same on purpose: saying no must be as easy as yes. */}
  113. 113 <button type="button" onClick={() => all(false)}>
  114. 114 Reject all
  115. 115 </button>
  116. 116 <button type="button" onClick={() => all(true)}>
  117. 117 Accept all
  118. 118 </button>
  119. 119 <button type="button" onClick={() => dialog.current?.showModal()}>
  120. 120 Choose
  121. 121 </button>
  122. 122 </section>
  123. 123 ) : null}
  124. 124 <dialog ref={dialog} aria-labelledby="consent-title" className="consent-dialog">
  125. 125 <form
  126. 126 key={choice ? String(choice.at) : "none"}
  127. 127 method="dialog"
  128. 128 onSubmit={(e) => {
  129. 129 const data = new FormData(e.currentTarget);
  130. 130 save({
  131. 131 analytics: data.get("analytics") === "on",
  132. 132 advertising: data.get("advertising") === "on",
  133. 133 media: data.get("media") === "on",
  134. 134 });
  135. 135 }}
  136. 136 >
  137. 137 <h2 id="consent-title">Cookie settings</h2>
  138. 138 <p>
  139. 139 Cookies that keep the site working are always on. Everything else is off until you turn
  140. 140 it on.
  141. 141 </p>
  142. 142 {present.map((c) => {
  143. 143 const locked = c === "advertising" && gpc;
  144. 144 return (
  145. 145 <label key={c}>
  146. 146 <input
  147. 147 type="checkbox"
  148. 148 name={c}
  149. 149 defaultChecked={!locked && (choice?.[c] ?? false)}
  150. 150 disabled={locked}
  151. 151 />
  152. 152 <strong>{COPY[c].title}</strong> {COPY[c].body} Uses:{" "}
  153. 153 {services
  154. 154 .filter((s) => s.category === c)
  155. 155 .map((s) => s.name)
  156. 156 .join(", ")}
  157. 157 .{locked ? " Off because your browser sends Global Privacy Control." : ""}
  158. 158 </label>
  159. 159 );
  160. 160 })}
  161. 161 <button type="submit">Save choices</button>
  162. 162 <button type="button" onClick={() => dialog.current?.close()}>
  163. 163 Cancel
  164. 164 </button>
  165. 165 </form>
  166. 166 </dialog>
  167. 167 </>
  168. 168 );
  169. 169}
  170. 170
  171. 171/** Put this in the footer of every page. */
  172. 172export function CookieSettingsLink() {
  173. 173 return (
  174. 174 <button type="button" onClick={() => window.dispatchEvent(new Event(OPEN_CONSENT_EVENT))}>
  175. 175 Cookie settings
  176. 176 </button>
  177. 177 );
  178. 178}
Sign in to comment on a line

Cookie settings

Cookies that keep you signed in and remember these choices are always on. Everything else is off until you turn it on.