Overview
The RichText component is used to handle text with different formatting options.
The following formatting options are currently supported:
headings from level 1 to 6 (headings 4 to 6 are available starting on
frontend-ui@2.0.7)paragraph
bold
italic
strikethrough
underline
link
image
horizontal line
bullet and numbered list
Import
The RichText component can be imported directly from the frontend-ui package, which is pre-installed in your Shogun Frontend store.
JSX
import RichText from 'frontend-ui/RichText'
Usage
RichText accepts a source prop, which must be of the type richtext.
import React from 'react'
import RichText from 'frontend-ui/RichText'
const MyComponent = ({ content }) => (
<RichText source={content} />
)
export default MyComponent
richtext type has the following shape:
// Example showing all the options available for the richtext type
const someRichTextContent = [
{
"type": "paragraph",
"children": [
{
"text": "This is a normal paragraph."
}
]
},
{
"type": "paragraph",
"children": [
{
"italic": true,
"text": "This is an italic paragraph."
}
]
},
{
"type": "paragraph",
"children": [
{
"strikethrough": true,
"text": "This is a strikethrough paragraph."
}
]
},
{
"type": "paragraph",
"children": [
{
"underline": true,
"text": "This is an underlined paragraph."
}
]
},
{
"type": "paragraph",
"children": [
{
"text": ""
},
{
"url": "https://getshogun.com/",
"type": "link",
"children": [
{
"text": "This is a link."
}
],
"external": true
},
{
"text": ""
}
]
},
{
"alt": "",
"url": "https://f.shgcdn.com/11e82e07-26f9-46b5-9dde-f1f46d7a9203/",
"type": "image",
"children": [
{
"text": ""
}
]
},
{
"type": "separator",
"children": [
{
"text": ""
}
]
},
{
"type": "bulletedList",
"children": [
{
"type": "listItem",
"children": [
{
"text": "This"
}
]
},
{
"type": "listItem",
"children": [
{
"text": "is a normal"
}
]
},
{
"type": "listItem",
"children": [
{
"text": "list"
}
]
}
]
},
{
"type": "numberedList",
"children": [
{
"type": "listItem",
"children": [
{
"text": "This"
}
]
},
{
"type": "listItem",
"children": [
{
"text": "is a numbered"
}
]
},
{
"type": "listItem",
"children": [
{
"text": "list"
}
]
}
]
},
{
"type": "h1",
"children": [
{
"text": "This is a heading level 1"
}
]
},
{
"type": "h2",
"children": [
{
"text": "This is a heading level 2"
}
]
},
{
"type": "h3",
"children": [
{
"text": "This is a heading level 3"
}
]
},
{
"type": "h4",
"children": [
{
"text": "This is a heading level 4"
}
]
},
{
"type": "h5",
"children": [
{
"text": "This is a heading level 5"
}
]
},
{
"type": "h6",
"children": [
{
"text": "This is a heading level 6"
}
]
}
]