MagicLinkSent

The "check your inbox" screen, with a resend countdown.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Button, MagicLinkSent } from '@weft-js/warp'export function Inbox() {  const email = PEOPLE[2]!.email  const changing = state(false)  return (    <>      {changing.value        ? <Button emphasis="outline" tone="neutral" onClick={() => (changing.value = false)}>Back to the sent screen</Button>        : <MagicLinkSent heading="h3" email={email} resendIn={15} onResend={() => {}} onChangeEmail={() => (changing.value = true)} />}    </>  )}const PEOPLE = [  { id: 'mara', name: 'Mara Lindqvist', email: 'mara@weft.dev', role: 'Owner', team: 'Platform', initials: 'ML' },  { id: 'jun', name: 'Jun Tanaka', email: 'jun@weft.dev', role: 'Admin', team: 'Platform', initials: 'JT' },  { id: 'priya', name: 'Priya Raman', email: 'priya@weft.dev', role: 'Member', team: 'Web', initials: 'PR' },  { id: 'tomas', name: 'Tomás Oliveira', email: 'tomas@weft.dev', role: 'Member', team: 'Web', initials: 'TO' },  { id: 'lena', name: 'Lena Fischer', email: 'lena@weft.dev', role: 'Member', team: 'Data', initials: 'LF' },  { id: 'noor', name: 'Noor Haddad', email: 'noor@weft.dev', role: 'Viewer', team: 'Data', initials: 'NH' },  { id: 'sam', name: 'Sam Okafor', email: 'sam@weft.dev', role: 'Member', team: 'Mobile', initials: 'SO' },  { id: 'ines', name: 'Inés Vidal', email: 'ines@weft.dev', role: 'Viewer', team: 'Mobile', initials: 'IV' },]

Installation

npm install @weft-js/warp

Usage

tsx

import { MagicLinkSent } from '@weft-js/warp'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`email`	`string`	—	Where it went.
`title`	`unknown`	—	The heading.
`lede`	`unknown`	—	One line under it.
`heading`	`Heading`	—	The title's level.
`resendIn`	`number`	`30`	Seconds before Resend opens.
`mailHref`	`string`	—	Shows Open email app.

Event	Type	Default	Description
`onResend`	`(() => void)`	—	Shows Resend.
`onChangeEmail`	`(() => void)`	—	Shows Change email.
`onBack`	`(() => void)`	—	Shows Back.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="stack"] [data-part="lede"]

lederow

RelatedSign in Reset password