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 link.

Add Reactstrap Components In ReactJS

In this article we will discuss the following Reactstrap components,

Navbar
Collapse
Tabs

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,

NavbarDemo.js
Collapsedemo.js
Tabsdemo.js

Now open NavbarDemo.js file and add the following code in this component,

import React, { Component } from 'react'
import './App.css';
import {
Collapse,
Navbar,
NavbarToggler,
Nav,
NavItem,
NavLink,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from 'reactstrap';
export class NavbarDemo extends Component {
render() {
return (
<div>
<Navbar className="light" color="light" light expand="md">
<NavbarToggler />
<Collapse navbar>
<Nav navbar>
<NavItem>
<NavLink>Home</NavLink>
</NavItem>
<NavItem>
<NavLink>About</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
Option 1
</DropdownItem>
<DropdownItem>
Option 2
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</div>
)
}
}
export default NavbarDemo

Now open App.js file and add the following code:

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

Run the project by using 'npm start' and check the result.

Now open Collapsedemo.js file and add the following code in this component:

import React, { Component } from 'react'
import { UncontrolledCollapse, Button, CardBody, Card } from 'reactstrap';
import { Collapse, Navbar, Nav, NavItem, NavLink } from 'reactstrap';
export class CollapseDemo extends Component {
render() {
return (
<div>
<Navbar color="info" light expand="md">
<Nav color="info" navbar>
<NavItem className="hdr">
<NavLink>Collapse Panel Using Reactstrap</NavLink>
</NavItem>
</Nav>
</Navbar>
<Button color="info" id="toggler" style={{ marginTop: '1rem' }}>
Collapse
</Button>
<UncontrolledCollapse toggler="#toggler">
<Card>
<CardBody>
Jaipur (/ˈdʒaɪpʊər/ (About this soundlisten))[6][7][8] is the capital and the largest city of the Indian state of Rajasthan. As of 2011, the city had a population of 3.1 million, making it the tenth most populous city in the country
</CardBody>
</Card>
</UncontrolledCollapse>
</div>
)
}
}
export default CollapseDemo

Run the project by using 'npm start' and check the result.

Now open Tabsdemo.js file and add the following code in this component.

import React, { useState } from 'react';
import { TabContent, TabPane, Navbar,Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col } from 'reactstrap';
const TabsDemo = (props) => {
const [activeTab, setActiveTab] = useState('1');
const toggle = tab => {
if(activeTab !== tab) setActiveTab(tab);
}
return (
<div>
<Navbar color="info" light expand="md">
<Nav color="info" navbar>
<NavItem className="hdr">
<NavLink>Reactstrap Tabs Components</NavLink>
</NavItem>
</Nav>
</Navbar>
<Nav tabs>
<NavItem>
<NavLink
className={({ active: activeTab === '1' })}
onClick={() => { toggle('1'); }}
>
Tab1
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={({ active: activeTab === '2' })}
onClick={() => { toggle('2'); }}
>
Tab2
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={({ active: activeTab === '3' })}
onClick={() => { toggle('3'); }}
>
Tab3
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<Row>
<Col sm="12">
<h4>Tab 1 Contents</h4>
</Col>
</Row>
</TabPane>
<TabPane tabId="2">
<Row>
<Col sm="12">
<h4>Tab 2 Contents</h4>
</Col>
</Row>
</TabPane>
<TabPane tabId="3">
<Row>
<Col sm="12">
<h4>Tab 3 Contents</h4>
</Col>
</Row>
</TabPane>
</TabContent>
</div>
);
}
export default TabsDemo;

Now open App.js file and add the following code,

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

Run the project by using 'npm start' and check the result.

Summary

In this article we learned how to use navbar, collapse, and tabs in Reactstrap components. Reactstrap is a component library for ReactJS.