List Pair
The List Pair component helps organize data by label and value.

Props

Name
Type
Description
Required
Default
copyable
boolean
Copy the unbolded text to the right (including markdown).
labelCopyable
boolean
Copy the bolded text to the left (including markdown).
false
label
string
The bolded left hand text.
onValueCopy
function
Executes the provided function when the value is copied.
null
onLabelCopy
function
Executes the provided function when the label is copied.
style
+Urgency
Background color of the component.
value
string
The unbolded left hand text. Markdown compatible.
Note: Types marked with + are Olive LDK enums

Examples

4 separate List Pair components with different style prop values and a markdown link
Javascript
React
1
import { whisper } from '@oliveai/ldk';
2
import {
3
Whisper,
4
WhisperComponentType,
5
} from '@oliveai/ldk/dist/whisper/types';
6
7
await whisper.create({
8
label: 'List Pair',
9
components: [
10
{
11
type: whisper.WhisperComponentType.ListPair,
12
copyable: true,
13
label: 'Label None Not Copyable',
14
labelCopyable: false,
15
onValueCopy: (error, value) => {
16
console.log('Copied: ', value);
17
},
18
style: whisper.Urgency.None,
19
value: 'Value None Copyable [Link](https://docs.oliveai.dev/)',
20
},
21
{
22
type: whisper.WhisperComponentType.ListPair,
23
copyable: true,
24
label: 'Label Error Copyable',
25
labelCopyable: true,
26
onLabelCopy: (error, value) => {
27
console.log('Copied: ', value);
28
},
29
style: whisper.Urgency.Error,
30
value: 'Value Error Copyable [Link](https://docs.oliveai.dev/)',
31
},
32
{
33
type: whisper.WhisperComponentType.ListPair,
34
copyable: true,
35
label: 'Label Success Not Copyable',
36
labelCopyable: false,
37
onValueCopy: (error, value) => {
38
console.log('Copied: ', value);
39
},
40
style: whisper.Urgency.Success,
41
value: 'Value Success Copyable [Link](https://docs.oliveai.dev/)',
42
},
43
{
44
type: whisper.WhisperComponentType.ListPair,
45
copyable: false,
46
label: 'Label Warning Copyable',
47
labelCopyable: true,
48
onLabelCopy: (error, value) => {
49
console.log('Copied: ', value);
50
},
51
style: whisper.Urgency.Warning,
52
value: 'Value Warning Not Copyable [Link](https://docs.oliveai.dev/)',
53
},
54
],
55
});
Copied!
1
import * as React from 'react';
2
import '@oliveai/ldk';
3
import * as ReactWhisper from '@oliveai/ldk/dist/whisper/react/renderer';
4
import { Urgency } from '@oliveai/ldk/dist/whisper/types';
5
6
const TestListPair = () => {
7
return (
8
<oh-whisper label="List Pair">
9
<oh-list-pair
10
copyable={true}
11
labelCopyable={false}
12
label="Label None Not Copyable"
13
onValueCopy={(error, value) => {
14
console.log('Copied: ', value);
15
}}
16
style={Urgency.None}
17
value="Value None Copyable [Link](https://docs.oliveai.dev/)"
18
/>
19
<oh-list-pair
20
copyable={true}
21
labelCopyable={true}
22
label="Label Error Copyable"
23
onLabelCopy={(error, value) => {
24
console.log('Copied: ', value);
25
}}
26
style={Urgency.Error}
27
value="Value Error Copyable [Link](https://docs.oliveai.dev/)"
28
/>
29
<oh-list-pair
30
copyable={true}
31
labelCopyable={false}
32
label="Label Success Not Copyable"
33
onValueCopy={(error, value) => {
34
console.log('Copied: ', value);
35
}}
36
style={Urgency.Success}
37
value="Value Success Copyable [Link](https://docs.oliveai.dev/)"
38
/>
39
<oh-list-pair
40
copyable={false}
41
labelCopyable={true}
42
label="Label Warning Copyable"
43
onLabelCopy={(error, value) => {
44
console.log('Copied: ', value);
45
}}
46
style={Urgency.Warning}
47
value="Value Warning Not Copyable [Link](https://docs.oliveai.dev/)"
48
/>
49
</oh-whisper>
50
);
51
};
52
53
ReactWhisper.renderNewWhisper(<TestListPair />);
Copied!
Copy link