Reactstrap Components In ReactJS - Part Two

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.

• Add Reactstrap Components In ReactJS
• Reactstrap Components In ReactJS

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,

1. Modals.js
2. Toasts.js
3. 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.