Component
HoverConfirm
It counts each time the pointer leaves and re-enters its content, then locks the card in a confirmed state after the third pass.
01 / Preview
Try it yourself.
Enter the card three separate times. It confirms only after the third pass.
Mechanism
- 1
- Move the pointer out of the card.
- 2
- Re-enter it to record one pass.
- 3
- Repeat three times, then click to reset.
02 / Usage
Put it somewhere.
example.tsxTSX
import { HoverConfirm } from "gra-ui";
import "gra-ui/styles.css";
export function Example() {
return <HoverConfirm>Approve this card</HoverConfirm>;
}03 / API
Small surface area.
PropTypeDescription
childrenReactNodeThe content that must be entered three times.