Reactstrap Components In ReactJS

Introduction

Reactstrap is a component library for Reactjs. It provides in-built Bootstrap components that provide flexibility and inbuilt validations, making it easy to create a UI. Reactstrap is similar to Bootstrap, but it has self-contained components.

You can check my previous articles in which we discussed how we add Reactstrap in Reactjs application from the below links.

In this article we will discuss the following Reactstrap components,

Modals
Toasts
Tooltip

Prerequisites

We should have a basic knowledge of HTML and JavaScript.
Visual Studio Code be installed
Node and NPM installed

Let's create a new React project by using the following command,

npx create-react-app reactstrapcomponent

Install Reactstrap by using the following command,

npm install --save reactstrap react react-dom

Now install Bootstrap in this project by using the following command.

npm install --save bootstrap

Now, open the index.js file and add import Bootstrap.

import 'bootstrap/dist/css/bootstrap.min.css';

Now, in Visual Studio code, go to src folder and create a new folder and inside this folder add 3 new components,

Modals.js
Toasts.js
Tooltips.js

Modals is used to display a message or information in a popup window on click or focus event. Now open Modals.js file and add the following code in this component,

import React, { useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { Navbar, Nav, NavItem, NavLink } from 'reactstrap';
const Models = (props) => {
const {
buttonLabel,
className
} = props;
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
return (
<div>
<Navbar className="btn btn-warning" light expand="md">
<Nav color="info" navbar>
<NavItem className="hdr">
<NavLink>Reactstrap Modals Components</NavLink>
</NavItem>
</Nav>
</Navbar>
<Button color="info" onClick={toggle}>Open Modal</Button>
<Modal isOpen={modal} toggle={toggle} className={className}>
<ModalHeader style={{ 'backgroundColor': "#0062cc" }} color="primary" toggle={toggle}>Modal title</ModalHeader>
<ModalBody>
Bengaluru (also called Bangalore) is the capital of India's southern Karnataka state. The center of India's high-tech industry, the city is also known for its parks and nightlife. By Cubbon Park, Vidhana Soudha is a Neo-Dravidian legislative building. Former royal residences include 19th-century Bangalore Palace, modeled after England’s Windsor Castle, and Tipu Sultan’s Summer Palace, an 18th-century teak structure.
</ModalBody>
<ModalFooter>
<Button color="primary">Save</Button>
<Button className="btn btn-danger">Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
export default Models;

Now open app.js file and the following code in this file,

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Models from './Models'
function App() {
return (
<div className="App">
<Models></Models>
</div>
);
}
export default App;

Now run the project and check the result.

Tooltips

Tooltip is a pop-up that displays a message or information on hover, click or focus event. Let's open Tooltips.js file and add the following code in this component.

import React, { useState } from 'react';
import { Tooltip, Button } from 'reactstrap';
import { Navbar, Nav, NavItem, NavLink } from 'reactstrap';
const Tooltipsdemo = (props) => {
const [tooltipOpen, setTooltipOpen] = useState(false);
const toggle = () => setTooltipOpen(!tooltipOpen);
return (
<div>
<Navbar className="btn btn-warning" light expand="md">
<Nav color="info" navbar>
<NavItem className="hdr">
<NavLink>Reactstrap Tooltips Components</NavLink>
</NavItem>
</Nav>
</Navbar>
<Button color="primary"><span href="#" id="btntip">Button</span></Button>
<Tooltip placement="top" isOpen={tooltipOpen} autohide={false} target="btntip" toggle={toggle}>
Tooltip Demo
</Tooltip>
</div>
);
}
export default Tooltipsdemo;

Now open app.js file and the following code in this file,

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Tooltipsdemo from './Tooltipsdemo'
function App() {
return (
<div className="App">
<Tooltipsdemo></Tooltipsdemo>
</div>
);
}
export default App;

Now run the project and check the result.

Toastr

Toastr is used to create a notification popup. Let's open ToastDemo.js file and add the following code in this component.

import React, { useState } from 'react';
import { Button, Toast, ToastBody, ToastHeader } from 'reactstrap';
import { Navbar, Nav, NavItem, NavLink } from 'reactstrap';
const Toastdemo = (props) => {
const [show, setShow] = useState(false);
const toggle = () => setShow(!show);
return (
<div>
<Navbar className="btn btn-warning" light expand="md">
<Nav color="info" navbar>
<NavItem className="hdr">
<NavLink>Reactstrap Toasts Components</NavLink>
</NavItem>
</Nav>
</Navbar>
<Button color="primary" onClick={toggle}>Toastr</Button>
<br />
<br />
<Toast isOpen={show}>
<ToastHeader toggle={toggle}>Toast title</ToastHeader>
<ToastBody>
Toastr Demo
</ToastBody>
</Toast>
</div>
);
}
export default Toastdemo;

Now run the project and check the result.

Summary

In this article we learned how to use Modals Tooltips, and Toast components. Reactstrap is a component library for ReactJS.