Link
The Link component provides the ability to customize anchor elements with four urgency styles

Props:

Properties
Descriptions
Required
Default
href
The web address that this link points.
text
The text that you want to display for your link.
onClick
Executes the provided function when the Link is clicked.
style
Urgency.Error- White text with red background. Urgency.None - purple text with no background.
Urgency.Success- White text with green background.
Urgency.Warning - Red Text with light yellow background.
Urgency.None
textAlign
TextAlign.Left - The inline contents are aligned to the left edge of the whisper content area. TextAlign.Right - The inline contents are aligned to the right edge of the whisper content area. TextAlign.Center - The inline contents are centered within the whisper content area.
TextAlign.Left

Examples

Let's take a closer look at the Link component and its different styles. In this code block, you can:
  • Create four different links with different Urgency options.
  • Create a link without style set up, the link will use its default style, which is Urgency.None.
  • Create a link for Olive Helps. By clicking this link, it will direct you to a new page.
  • Create a link to Update the Whisper. By clicking the link, it will update the Whisper. The updated Whisper should look like the screenshot below.
TypeScript Example
React Example
1
import { whisper } from '@oliveai/ldk';
2
import {
3
TextAlign,
4
Urgency,
5
Whisper,
6
WhisperComponentType,
7
} from '@oliveai/ldk/dist/whisper/types';
8
9
export const linkWhisper = async () => {
10
await whisper.create({
11
label: 'Links',
12
onClose: () => {
13
console.debug('closed');
14
},
15
components: [
16
{
17
type: WhisperComponentType.Link,
18
textAlign: TextAlign.Left,
19
onClick: () => {
20
console.log('success');
21
},
22
text: `Urgency.Success`,
23
style: Urgency.Success,
24
},
25
{
26
type: WhisperComponentType.Link,
27
textAlign: TextAlign.Left,
28
onClick: () => {
29
console.log('warning');
30
},
31
text: `Urgency.Warning`,
32
style: Urgency.Warning,
33
},
34
{
35
type: WhisperComponentType.Link,
36
textAlign: TextAlign.Left,
37
onClick: () => {
38
console.log('error');
39
},
40
text: `Urgency.Error`,
41
style: Urgency.Error,
42
},
43
{
44
type: WhisperComponentType.Link,
45
textAlign: TextAlign.Left,
46
onClick: () => {
47
console.log('none');
48
},
49
text: `Urgency.None`,
50
style: Urgency.None,
51
},
52
{
53
type: WhisperComponentType.Link,
54
textAlign: TextAlign.Left,
55
onClick: () => {
56
console.log('default');
57
},
58
text: `Default`,
59
},
60
{
61
type: WhisperComponentType.Link,
62
text: `Olive Helps`,
63
textAlign: TextAlign.Left,
64
href: 'https://oliveai.com/developers/helps',
65
onClick: () => {
66
console.log('success');
67
},
68
},
69
{
70
type: WhisperComponentType.Link,
71
textAlign: TextAlign.Left,
72
text: `Update the Whisper`,
73
onClick: (_error: Error, onClickWhisper: Whisper) => {
74
onClickWhisper.update({
75
components: [
76
{
77
type: WhisperComponentType.Message,
78
body: 'You just updated this whisper by clicking the link!',
79
},
80
],
81
});
82
},
83
},
84
],
85
});
86
}
87
Copied!
If you have any questions about Updating Whispers, please check Whisper Updates.
1
import { React, ReactWhisper } from '@oliveai/ldk';
2
import { TextAlign, Urgency } from '@oliveai/ldk/dist/whisper/types';
3
4
const LinkWhispers: React.FunctionComponent<Object> = () => {
5
// Set initial React state to isWhisperUpdated===false
6
const [isWhisperUpdated, updateWhisper] = React.useState(false);
7
return (
8
<oh-whisper label='Link examples' onClose={() => console.debug('closed')}>
9
{isWhisperUpdated === true && <oh-message body="You just updated this whisper by clicking the link!" />}
10
{isWhisperUpdated === false && [
11
<oh-link
12
textAlign={TextAlign.Left}
13
text="Urgency.Success"
14
style={Urgency.Success}
15
onClick={() => {
16
console.log('success');
17
}}
18
/>,
19
<oh-link
20
textAlign={TextAlign.Left}
21
text="Urgency.Warning"
22
style={Urgency.Warning}
23
onClick={() => {
24
console.log('warning');
25
}}
26
/>,
27
<oh-link
28
textAlign={TextAlign.Left}
29
text="Urgency.Error"
30
style={Urgency.Error}
31
onClick={() => {
32
console.log('error');
33
}}
34
/>,
35
<oh-link
36
textAlign={TextAlign.Left}
37
text="Urgency.None"
38
style={Urgency.None}
39
onClick={() => {
40
console.log('none');
41
}}
42
/>,
43
<oh-link
44
textAlign={TextAlign.Left}
45
text="default"
46
onClick={() => {
47
console.log('default');
48
}}
49
/>,
50
<oh-link
51
textAlign={TextAlign.Left}
52
text="Olive Helps"
53
href="https://oliveai.com/developers/helps"
54
onClick={() => {
55
console.log('success');
56
}}
57
/>,
58
<oh-link
59
textAlign={TextAlign.Left}
60
text="Update the Whisper"
61
onClick={(error) => {
62
if (error) {
63
console.log(error);
64
} else {
65
// Update React State to isWhisperUpdated===true
66
updateWhisper(true);
67
}
68
}}
69
/>,
70
]}
71
</oh-whisper>
72
);
73
};
74
75
ReactWhisper.renderNewWhisper(<LinkWhispers />);
Copied!
If you have any questions about Updating React Whispers, please check JSX Whispers.
Copy link