• Accueil
  • Exemples
    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
  • Code source
  • Aller au CMS

Built-in features

  • Hosting
  • Stages & secrets
  • CI/CD
  • Static i18n
  • Monitoring
  • API (Airtable)
  • CSS-in-JS
  • Cookies consent
  • Analytics
  • Icons
  • CSS Animations
  • UI components library
  • Docs site
  • Markdown as JSX

Previous section - Next sectionAccueil

UI components examples, using Reactstrap and Bootstrap

Reactstrap is based on Bootstrap 4.

It wasn't an easy choice to decide which UI library to use, there are so many out there.
Eventually, we chose Bootstrap because it's very famous and seems more supported than its counterparts.
Also, it relatively lightweight (~40kB).
Eventually, it really depends on what you want to use, and while NRN comes with built-in Reactstrap support, we encourage you to chose what fits your needs best.
We won't showcase Reactstrap usage here, because the official website does it already (even though many things are missing, and examples could be better overall)...

Below, we will showcase a few components built-in with NRN:

Tooltip

The native Reactstrap tooltip is disappointing. Not only it's hard to use, but it can also crash your whole app under particular circumstances.
To fix this, we built our own, which relies on rc-tooltip .

Example:

1 2 3 4 5 6 7 <Tooltip overlay={<span>This is a tooltip</span>} > <Button>Hover/Click me</Button> </Tooltip>

Example:

1 2 3 4 5 6 7 8 <Tooltip overlay={<span>This is a tooltip</span>} placement={'right'} > <Button>Hover/Click me</Button> </Tooltip>

Utilisateur 1 - 2023
Tous droits réservés

Conditions générales d'utilisation
Politique de confidentialité
/static/images/LOGO_Powered_by_UNLY_BLACK_BLUE.svg