Link
The Link component provides the ability to customize anchor elements with four urgency styles
Props:
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.
import { whisper } from '@oliveai/ldk';
import {
TextAlign,
Urgency,
Whisper,
WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';
export const linkWhisper = async () => {
await whisper.create({
label: 'Links',
onClose: () => {
console.debug('closed');
},
components: [
{
type: WhisperComponentType.Link,
textAlign: TextAlign.Left,
onClick: () => {
console.log('success');
},
text: `Urgency.Success`,
style: Urgency.Success,
},
{
type: WhisperComponentType.Link,
textAlign: TextAlign.Left,
onClick: () => {
console.log('warning');
},
text: `Urgency.Warning`,
style: Urgency.Warning,
},
{
type: WhisperComponentType.Link,
textAlign: TextAlign.Left,
onClick: () => {
console.log('error');
},
text: `Urgency.Error`,
style: Urgency.Error,
},
{
type: WhisperComponentType.Link,
textAlign: TextAlign.Left,
onClick: () => {
console.log('none');
},
text: `Urgency.None`,
style: Urgency.None,
},
{
type: WhisperComponentType.Link,
textAlign: TextAlign.Left,
onClick: () => {
console.log('default');
},
text: `Default`,
},
{
type: WhisperComponentType.Link,
text: `Olive Helps`,
textAlign: TextAlign.Left,
href: 'https://oliveai.com/developers/helps',
onClick: () => {
console.log('success');
},
},
{
type: WhisperComponentType.Link,
textAlign: TextAlign.Left,
text: `Update the Whisper`,
onClick: (_error: Error, onClickWhisper: Whisper) => {
onClickWhisper.update({
components: [
{
type: WhisperComponentType.Message,
body: 'You just updated this whisper by clicking the link!',
},
],
});
},
},
],
});
}
If you have any questions about Updating Whispers, please check Whisper Updates.
import { React, ReactWhisper } from '@oliveai/ldk';
import { TextAlign, Urgency } from '@oliveai/ldk/dist/whisper/types';
const LinkWhispers: React.FunctionComponent<Object> = () => {
// Set initial React state to isWhisperUpdated===false
const [isWhisperUpdated, updateWhisper] = React.useState(false);
return (
<oh-whisper label='Link examples' onClose={() => console.debug('closed')}>
{isWhisperUpdated === true && <oh-message body="You just updated this whisper by clicking the link!" />}
{isWhisperUpdated === false && [
<oh-link
textAlign={TextAlign.Left}
text="Urgency.Success"
style={Urgency.Success}
onClick={() => {
console.log('success');
}}
/>,
<oh-link
textAlign={TextAlign.Left}
text="Urgency.Warning"
style={Urgency.Warning}
onClick={() => {
console.log('warning');
}}
/>,
<oh-link
textAlign={TextAlign.Left}
text="Urgency.Error"
style={Urgency.Error}
onClick={() => {
console.log('error');
}}
/>,
<oh-link
textAlign={TextAlign.Left}
text="Urgency.None"
style={Urgency.None}
onClick={() => {
console.log('none');
}}
/>,
<oh-link
textAlign={TextAlign.Left}
text="default"
onClick={() => {
console.log('default');
}}
/>,
<oh-link
textAlign={TextAlign.Left}
text="Olive Helps"
href="https://oliveai.com/developers/helps"
onClick={() => {
console.log('success');
}}
/>,
<oh-link
textAlign={TextAlign.Left}
text="Update the Whisper"
onClick={(error) => {
if (error) {
console.log(error);
} else {
// Update React State to isWhisperUpdated===true
updateWhisper(true);
}
}}
/>,
]}
</oh-whisper>
);
};
ReactWhisper.renderNewWhisper(<LinkWhispers />);
If you have any questions about Updating React Whispers, please check JSX Whispers.
Last updated