We use this "terms" page to showcase what's achievable using Markdown + HTML + JSX.
The English version is locked, but you can play around using the French version using the "Go to CMS" nav link.
Heading 2 Heading 3
Link in new tab
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
Help tooltips, using
Some complex stuff (click/hover me!)
Localised links, using
Link to homepage, keeping current locale
Button to change the current locale, using
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.
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.