Tally UI

CustomerCard

Displays customer name, email, and address using connector traits

Import

import { CustomerCard } from '@tallyui/components';

Usage

<CustomerCard doc={customerDocument} />

Renders a customer's name, email, and address summary. The component reads data through useCustomerTraits(), so the active connector's customer trait implementation determines which fields are used.

Requires a ConnectorProvider ancestor in the component tree.

Props

PropTypeDefaultDescription
docanyrequiredCustomer document from RxDB
classNamestring---Override container styles

Trait mapping

FieldTrait method
Nametraits.customer.getName(doc)
Emailtraits.customer.getEmail(doc)
Addresstraits.customer.getAddressSummary(doc)

If the connector doesn't implement customer traits, the component renders nothing.

Live demo

On this page