Skip to content
weftGitHub

PeerSelection

An outline with a name flag, for a whole object another person has selected.

SourcePackage @weft-js/warp

Preview

tsx
import { PeerSelection, Text } from '@weft-js/warp'import type { Peer } from '@weft-js/warp'export function PeerSelectionText() {  return (    <Text>The stale window is <PeerSelection peer={JUN}>30 seconds</PeerSelection> on every region.</Text>  )}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' },]const PEERS: Peer[] = PEOPLE.map((p, i) => ({ id: p.id, name: p.name, color: i + 1 }))const [MARA, JUN, PRIYA, TOMAS, LENA, NOOR, SAM, INES] = PEERS as [Peer, Peer, Peer, Peer, Peer, Peer, Peer, Peer]

Installation

npm install @weft-js/warp

Usage

tsx
import { PeerSelection } from '@weft-js/warp'<Text>The stale window is <PeerSelection peer={JUN}>30 seconds</PeerSelection> on every region.</Text>

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

PropTypeDefaultDescription
peerPeer—Whose selection it is.
childrenunknown—What it contains.

RelatedPeer markLocked field