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