We use this "terms" page to showcase what's achievable using Markdown + HTML + JSX.
You can edit this through Stacker, see "Go to CMS" nav link.
Using Markdown
Heading 2 Heading 3
Bold
Italic
Strikethrough
Link in new tab
Using HTML
Heading 4
Heading 5
Heading 6
Italic
Link (same tab)
Link (new tab)
Using JSX (React components)
Note: Only a small subset of components are made available. It works based on a whitelist. You can see the full list here.
Components from Reactstrap
Custom components
Help tooltips, using Tooltip
component:
Some complex stuff (click/hover me!)
Localised links, using I18nLink
component:
Link to homepage, keeping current locale
Button to change the current locale, using I18nBtnChangeLocale
component:
Note: All links always open in a new tab with "noopener" to ensure proper security defaults. This only work when used from the app (not from Stacker)
Note: Stacker can preview Markdown but not HTML/JSX. The behaviour between Stacker Markdown preview and real rendering can be different.
As you can see above, using JSX brings quite a few interesting capabilities. But it isn't all-powerful though.
It's not possible to use JavaScript, so forget about using an onClick
event for instance. You'll need to find workarounds for this kinds of things.
Also, it's not possible to provide non-scalar props. Forget about providing a component with an object, or array, for instance.
Nevertheless, it brings quite a few possibilities to your app. The secret is to keep things simple, using simple JSX components that rely on few props. The I18nBtnChangeLocale
is a great example of that. No props, but changes the language for the whole app anyway, it's quite a powerful integration and very simple to use.