Tear ticket
An event ticket whose stub tears off along a perforation and leaves a jagged edge behind.
Gallery pass
Tear off the stub to mark the pass as used. The stub is a button, so the keyboard tears it too.
Rooftop galleryUntil 30 NovemberLate viewing, level 4
The pass is intact and ready at the door.
Implementation
1"use client";2 3import { useEffect, useId, useState, type HTMLAttributes } from "react";4 5export type TearTicketProps = Omit<6 HTMLAttributes<HTMLDivElement>,7 "children" | "onChange"8> & {9 /** The event name on the body of the ticket. */10 name: string;11 /** The date line under the name. */12 date?: string;13 /** The venue or entry line on the body. */14 detail?: string;15 /** The serial printed on the stub. */16 serial?: string;17 /** Accessible name for the stub button. */18 label?: string;19 /** Controlled torn state. */20 torn?: boolean;21 /** Initial torn state when the component is uncontrolled. */22 defaultTorn?: boolean;23 /** Called when the stub tears off or is restored. */24 onTearChange?: (torn: boolean) => void;25 /** Additional class name for the root. */26 className?: string;27};28