### With a contact
#### Including all data types
```jsx
const contacts = [
{
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 1,
},
],
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
},
];
console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
;
```
#### Really long long data
```
const contacts = [
{
name: {
displayName: 'Dr. First Middle Last Junior Senior and all that and a bag of chips',
},
number: [
{
value: '(202) 555-0000 0000 0000 0000 0000 0000 0000 0000 0000 0000',
type: 1,
},
],
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
},
];
console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
;
```
#### In group conversation
```jsx
const contacts = [
{
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 1,
},
],
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
},
];
console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
console.log('onClickContact')}
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
;
```
#### If contact has no signal account
```jsx
const contacts = [
{
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 1,
},
],
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
},
];
console.log('onClickContact')}
/>
console.log('onClickContact')}
/>
console.log('onClickContact')}
/>
console.log('onClickContact')}
/>
;
```
#### With organization name instead of name
```jsx
const contacts = [
{
organization: 'United Somewheres, Inc.',
email: [
{
value: 'someone@somewheres.com',
type: 2,
},
],
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
},
];
console.log('onClickContact')}
/>
console.log('onClickContact')}
/>
console.log('onClickContact')}
/>
;
```
#### No displayName or organization
```jsx
const contacts = [
{
name: {
givenName: 'Someone',
},
number: [
{
value: '+12025551000',
type: 1,
},
],
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
},
];
console.log('onClickContact')}
/>
console.log('onClickContact')}
/>
console.log('onClickContact')}
/>
console.log('onClickContact')}
/>
;
```
#### Default avatar
```jsx
const contacts = [
{
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: util.CONTACTS[0].id,
type: 1,
},
],
},
];
console.log('onClickContact')}
/>
console.log('onClickContact')}
/>
console.log('onClickContact')}
/>
console.log('onClickContact')}
/>
;
```
#### Empty contact
```jsx
const contacts = [{}];
console.log('onClickContact')}
/>
console.log('onClickContact')}
/>
console.log('onClickContact')}
/>
console.log('onClickContact')}
/>
;
```
#### Contact with caption (cannot currently be sent)
```jsx
const contacts = [
{
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 1,
},
],
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
},
];
console.log('onClickContact')}
/>
console.log('onClickContact')}
/>
console.log('onClickContact')}
contactHasSignalAccount
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
console.log('onClickContact')}
contactHasSignalAccount
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
console.log('onClickContact')}
/>
console.log('onClickContact')}
/>
console.log('onClickContact')}
contactHasSignalAccount
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
console.log('onClickContact')}
contactHasSignalAccount
onSendMessageToContact={() => console.log('onSendMessageToContact')}
/>
;
```