Component

FocusReceipt

It turns focus into an unnecessary receipt printer. Focus an original child and a real copy appears in the station bearing that child’s position; the original stays where it was, so the receipt records attention without improving the content.

Possible use

It could be used to make a reviewer leave a physical-looking copy of every field they inspect on a handoff card, or to let a presenter build a receipt of the agenda labels they touched during a talk.

Reasonable alternative

A reasonable local alternative is a focus style and one local array of visited indices. Publishing a receipt printer is difficult to defend because looking at a field should not duplicate it.

01 / Preview

Try it yourself.

Title

Status

Owner

Date

Copies by original position

—

Focus each field. Every glance prints a copy beneath its original position.

Mechanism

1: Start with four originals and an empty receipt.
2: Tab through the fields, or focus one directly.
3: Each focus leaves a real copy in the station matching its position.
4: Clear the receipt when the inspection has become ceremonial.

02 / Usage

Put it somewhere.

example.tsxTSX

import { FocusReceipt } from "gra-ui";
import "gra-ui/styles.css";

export function AuditedFields() {
  return (
    <FocusReceipt>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
      <span>Date</span>
    </FocusReceipt>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe focusable originals that issue copies into their matching receipt stations.