React / Next.js code snippets

export type RGB = [number, number, number];
export function parseHex(hex: string): RGB {
  let h = hex.trim().replace(/^#/, '');
  if (h.length === 3) h = [...h].map((c) => c + c).join('');
  if (!/^[0-9a-f]{6}$/i.test(h)) throw new Error(`Invalid colour "${h…
  return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)) as RGB;
}
const toHex = (rgb: RGB) => '#' + rgb.map((v) => Math.round(v).toStri…
// sRGB channel -> linear light, then weighted by how the eye sees ea…

export const STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900…
// Target lightness (%) for each step of the ramp.
const LIGHTNESS = [97, 93, 85, 75, 63, 52, 43, 35, 27, 19, 11];
type HSL = [number, number, number]; // h 0-360, s/l 0-100
function hexToHsl(hex: string): HSL {
  const v = hex.replace('#', '');
  const full = v.length === 3 ? [...v].map((c) => c + c).join('') : v;
  const [r, g, b] = [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2…
  const max = Math.max(r, g, b);

export type Part = { text: string; hit: boolean; groups?: string[] };
export function segments(pattern: string, flags: string, text: string…
  let re: RegExp;
  try {
    re = new RegExp(pattern, flags.includes('g') ? flags : flags + 'g…
  } catch (e) {
    return { parts: [{ text, hit: false }] as Part[], error: (e as Er…
  }
  const parts: Part[] = [];

type Options = { interval?: number; maxDelay?: number; enabled?: bool…
export function usePolling<T>(fn: (signal: AbortSignal) => Promise<T>…
  const [data, setData] = useState<T>();
  const [error, setError] = useState<unknown>();
  const fnRef = useRef(fn);
  fnRef.current = fn;
  const runNow = useRef<() => void>(() => {});
  useEffect(() => {
    if (!enabled) return;

export function useLocalStorageState<T>(
  key: string,
  initial: T,
  validate: (value: unknown) => value is T = (v): v is T => v !== und…
): [T, Dispatch<SetStateAction<T>>, boolean] {
  const [value, setValue] = useState<T>(initial);
  const [hydrated, setHydrated] = useState(false);
  const validateRef = useRef(validate);
  validateRef.current = validate;

type State<T> = { past: T[]; present: T; future: T[]; limit: number };
type Action<T> =
  | { type: 'set'; value: T; replace: boolean }
  | { type: 'undo' }
  | { type: 'redo' };
function reducer<T>(s: State<T>, a: Action<T>): State<T> {
  switch (a.type) {
    case 'set': {
      if (Object.is(a.value, s.present)) return s;

type Options = { accept?: string[]; multiple?: boolean };
// Matches "image/*", "application/pdf" or ".png" against a file.
function matches(file: File, patterns: string[]): boolean {
  if (patterns.length === 0) return true;
  return patterns.some((p) => {
    if (p.startsWith('.')) return file.name.toLowerCase().endsWith(p.…
    if (p.endsWith('/*')) return file.type.startsWith(p.slice(0, -1));
    return file.type === p;
  });

type Status = 'idle' | 'running' | 'paused' | 'done';
export function useCountdown(durationMs: number, onDone?: () => void)…
  const [status, setStatus] = useState<Status>('idle');
  const [remaining, setRemaining] = useState(durationMs);
  const endsAt = useRef(0);
  const doneRef = useRef(onDone);
  doneRef.current = onDone; // latest callback without restarting the…
  useEffect(() => {
    if (status !== 'running') return;

export function SignaturePad({ onChange, height = 160 }: { onChange?:…
  const ref = useRef<HTMLCanvasElement>(null);
  const [empty, setEmpty] = useState(true);
  // Match the backing store to the screen density so lines stay cris…
  useEffect(() => {
    const canvas = ref.current!;
    const dpr = window.devicePixelRatio || 1;
    canvas.width = canvas.clientWidth * dpr;
    canvas.height = height * dpr;

const starter = {
  html: '<button id="go">Click me</button>\n<p id="out"></p>',
  css: 'body { font-family: system-ui; padding: 1rem }',
  js: "document.getElementById('go').onclick = () => {\n  document.ge…
};
type Code = typeof starter;
// CSP keeps the frame offline; the sandbox gives it an opaque origin.
function buildDoc({ html, css, js }: Code) {
  const safeJs = js.replace(/<\/script/gi, '<\\/script'); // cannot c…

type Job = { company: string; title: string; period: string; points: …
type Props = { name: string; role: string; summary?: string; jobs: Jo…
export function Resume({ name, role, summary, jobs }: Props) {
  return (
    <>
      <div className="no-print toolbar">
        <button type="button" onClick={() => window.print()}>
          Print or save as PDF
        </button>

type Props = {
  value: string;
  size?: number; // rendered width/height in px
  level?: 'L' | 'M' | 'Q' | 'H'; // error correction
  margin?: number; // quiet zone in modules (spec says 4)
  fg?: string;
  bg?: string;
  label?: string;
};

const escapeHtml = (s: string) =>
  s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'…
function inline(s: string) {
  return s
    .replace(/`([^`]+)`/g, '<code>$1</code>')
    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
    .replace(/\*([^*]+)\*/g, '<em>$1</em>')
    // only http(s) links, so javascript: URLs can never be injected
    .replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" r…

export type Row = { id: string; label: string; qty: number; price: nu…
type Action = { type: 'add' } | { type: 'patch'; id: string; patch: P…
const blank = (): Row => ({ id: crypto.randomUUID(), label: '', qty: …
function reducer(rows: Row[], a: Action): Row[] {
  switch (a.type) {
    case 'add': return [...rows, blank()];
    case 'patch': return rows.map((r) => (r.id === a.id ? { ...r, ...…
    case 'remove': return rows.filter((r) => r.id !== a.id);
  }

type Card = { id: string; title: string };
type Board = Record<string, Card[]>;
const seed: Board = {
  Todo: [{ id: 'a', title: 'Draft proposal' }, { id: 'b', title: 'Rev…
  Doing: [{ id: 'c', title: 'Build landing page' }],
  Done: [{ id: 'd', title: 'Kick-off call' }],
};
// Pure: returns a new board with the card removed and re-inserted at…
export function moveCard(board: Board, id: string, to: string, index:…

export type Json = string | number | boolean | null | Json[] | { [key…
const scalarColour = (v: Json) =>
  typeof v === 'string' ? 'text-emerald-600'
  : typeof v === 'number' ? 'text-sky-600'
  : typeof v === 'boolean' ? 'text-violet-600'
  : 'text-slate-400';
function Node({ name, value, depth, openDepth }: { name?: string; val…
  const isBranch = value !== null && typeof value === 'object';
  const [open, setOpen] = useState(depth < openDepth);

export type Task = { id: string; name: string; start: string; end: st…
const DAY = 864e5;
// Parse as UTC so daylight-saving changes never alter the day count.
const utc = (iso: string) => {
  const [y, m, d] = iso.split('-').map(Number) as [number, number, nu…
  return Date.UTC(y, m - 1, d);
};
export function bars(tasks: Task[]) {
  if (!tasks.length) return { items: [], mondays: [] as number[], day…

// Fallback for browsers/frames where the async clipboard API is bloc…
function legacyCopy(value: string): boolean {
  const ta = document.createElement('textarea');
  ta.value = value;
  ta.setAttribute('readonly', '');
  ta.style.cssText = 'position:fixed;opacity:0;pointer-events:none';
  document.body.appendChild(ta);
  ta.select();
  try {

type View = { x: number; y: number; k: number };
export function usePanZoom(min = 0.2, max = 5) {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [view, setView] = useState<View>({ x: 0, y: 0, k: 1 });
  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;
    // Native listener: React's onWheel is passive and cannot stop pa…
    const onWheel = (e: WheelEvent) => {

const blocked = new net.BlockList();
for (const [ip, bits] of [
  ['0.0.0.0', 8], ['10.0.0.0', 8], ['100.64.0.0', 10], ['127.0.0.0', …
  ['172.16.0.0', 12], ['192.0.0.0', 24], ['192.168.0.0', 16], ['198.1…
] as const) blocked.addSubnet(ip, bits, 'ipv4');
for (const [ip, bits] of [['::', 128], ['::1', 128], ['fc00::', 7], […
  blocked.addSubnet(ip, bits, 'ipv6'); // ::ffff:0:0/96 covers IPv4-m…
}
async function resolvePublic(host: string) {

export type Idea = { label: string; children?: Idea[] };
type Placed = { label: string; x: number; y: number; branch: number };
type Edge = { from: Placed; to: Placed };
const ROW = 44; // vertical slot per leaf
const COL = 190; // horizontal distance between levels
const W = 140; // node width
const H = 30; // node height
// Pass 1: how many leaf rows does each subtree need?
const rows = (n: Idea): number => (n.children?.length ? n.children.re…

export type Row = { kind: 'same' | 'add' | 'del'; text: string };
export function diffLines(a: string, b: string, { trim = false } = {}…
  const A = a.replace(/\r\n/g, '\n').split('\n');
  const B = b.replace(/\r\n/g, '\n').split('\n');
  const key = (s: string) => (trim ? s.trim() : s); // compare normal…
  // lcs[i][j] = LCS length of A[i..] and B[j..]
  const lcs = Array.from({ length: A.length + 1 }, () => new Uint32Ar…
  for (let i = A.length - 1; i >= 0; i--) {
    for (let j = B.length - 1; j >= 0; j--) {

export type InvoiceItem = { description: string; qty: number; price: …
export type Invoice = { number: string; client: string; currency: str…
export async function downloadInvoicePdf(inv: Invoice) {
  const { jsPDF } = await import('jspdf'); // loaded only when the bu…
  const doc = new jsPDF({ unit: 'mm', format: 'a4' });
  const money = new Intl.NumberFormat('en', { style: 'currency', curr…
  const left = 15;
  const right = 195;
  const bottom = 270;

export type Row = { month: number; payment: number; interest: number;…
const cents = (x: number) => Math.round(x * 100);
/** Monthly instalment in currency units (rounded to cents). */
export function emi(principal: number, annualRatePct: number, months:…
  if (!(principal > 0) || !Number.isInteger(months) || months < 1) th…
  const r = annualRatePct / 12 / 100;
  if (r === 0) return cents(principal / months) / 100; // no interest…
  const growth = (1 + r) ** months;
  return cents((principal * r * growth) / (growth - 1)) / 100;