Hypertext

The Hypertext component parses rich text formatted as markdown or HTML to render the proper DOM elements. The Text component is a wrapper for the Hypertext component; either can be used with the same result.

Examples

Markdown

When 'markdown' is passed in as the format type, the raw markdown will be sanitized and parsed into HTML element(s). This simple example shows how the Hypertext component can be used to render <h3>h3 header</h3>

Preview

h3 header

Code

  import { Hypertext } from '@hv/ui/hypertext';

  <Hypertext text='### h3 header' format='markdown' />

HTML

When 'html' is passed in as the format type, the raw HTML will be sanitized and parsed into JSX element(s).

Preview

h3 header

paragraph

Code

  import { Hypertext } from '@hv/ui/hypertext';

  <Hypertext text='<h3>h3 header</h3><p>paragraph</p>' format='html' />

Props

Property	Description	Type
text	The text	String
format	The format of the text	String Enum of 'markdown' or 'html'