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:


            <Tooltip
              overlay={<span>This is a tooltip</span>}
            >
              <Button>Hover/Click me</Button>
            </Tooltip>

Example:


            <Tooltip
              overlay={<span>This is a tooltip</span>}
              placement={'right'}
            >
              <Button>Hover/Click me</Button>
            </Tooltip>

Built-in features

UI components examples, using Reactstrap and Bootstrap

Tooltip