https://media.graphcms.com/quality=value:100/resize=height:100/auto_image/lOXvIyIHQzyM8sbCLOo2
  • Home
  • Examples
    Native features
    SSR (getServerSideProps)SSGSSG using fallbackSSG using revalidateCatch-all routes
    Built-in features
    HostingStages & secretsCI/CDStatic i18nMonitoringCSS-in-JSCookies consentAnalyticsIconsCSS AnimationsUI components libraryDocs site
    Built-in utilities
    I18nLink componentHooksAPIErrors handlingBundle analysisSVG to ReactSecurity auditTracking useless re-renders
  • Documentation
  • Source code
  • Go to CMS

Built-in features

  • Hosting
  • Stages & secrets
  • CI/CD
  • Static i18n
  • Monitoring
  • CSS-in-JS
  • Cookies consent
  • Analytics
  • Icons
  • CSS Animations
  • UI components library
  • Docs site

Previous section - Next sectionHome

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>
https://media.graphcms.com/lOXvIyIHQzyM8sbCLOo2

Customer 1 - 2021
All rights reserved

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