iOS_Logo_1024x1024-100.png
  • Home
  • Examples
    Native features
    SSR (getServerSideProps)SSGSSG using fallbackSSG using revalidateCatch-all routes
    Built-in features
    HostingStages & secretsCI/CDStatic i18nMonitoringAPI (Airtable)CSS-in-JSCookies consentAnalyticsIconsCSS AnimationsUI components libraryDocs siteMarkdown as JSX
    Built-in utilities
    I18nLink componentAirtableAsset componentHooksHOCsAPIErrors handlingBundle analysisSVG to ReactSecurity auditTracking useless re-renders
  • Documentation
  • Source code
  • Go to CMS

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.


Using Markdown

Heading 2 Heading 3

Bold

Italic

Strikethrough

Link in new tab


Using HTML

Heading 4

Heading 5
Heading 6
Text in div
Bold
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

An Alert "info"
An Alert "success"




Col 1 in a Row (with custom CSS)
Col 2 in a Row

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.

iOS_Logo_1024x1024-100.png

Uber 12 - 2021
All rights reserved

Terms
Politique de confidentialité
/static/images/LOGO_Powered_by_UNLY_BLACK_BLUE.svg