Components
Home
Packages
AlertsAvatarBannersBreadcrumbsButtonsButtonsDS3CardColor PickerColorsContent RendererUsage with bare contentUsage with html contentUsage with markdown contentUsage with widgetType "article"Usage with widgetType "page"Test content with code blocks.EmojisFile IconFile PickerForm ElementsIcons AppIcons FileIcons FlagIcons LegacyIcons SymbolImage CarouselImage CropperImage GridLayoutListLoadersMenusModalsNavigationThemeToastTypography
Content-renderer
Name
@happeouikit/content-renderer
Latest
3.2.27
License
MIT
Installation
yarn add @happeouikit/content-renderer
Links
Dependencies (7)
html-entities@^2.3.2
linkify-html@^4.1.3
linkifyjs@^4.1.3
loadjs@^4.3.0
react-dom@^17.0.2
showdown@^2.1.0
xss@^1.0.15
Rendering text, html and markdown content, run through emojis converter and linkify all link elements. This will wrap the content inside <p> tags.
Usage with bare content
Rendering with bare content, i.e. just text. In this case, specify "text" as the type.
<ContentRenderer type={"TEXT"} content={"text content"} />
Usage with html content
Rendering with html content will run the html through xss filter to allow only given html tags and attributes.
<ContentRenderer type={"HTML"} createAnchors content={"html content"} />
Rendering with html content with a lot of xss injections.
Usage with markdown content
Rendering with markdown content will run the markdown through html converter and through xss filter to allow only given html tags and attributes.
<ContentRenderer type={"MARKDOWN"} content={"markdown content"} />
Usage with widgetType "article"
Usage with widgetType "page"
The widgetType "page" forces as little styles as possible. Mainly anchoring and code blocks, everything will be inherited.
Test content with code blocks.
Test 1
Test 2
Test 3
Test 4
Test 5 - Color blocks
Test 6 - Nested markdown lists