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.
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,
  1. npx create-react-app reactstrapcomponent  
Install Reactstrap by using the following command,
  1. npm install --save reactstrap react react-dom    
Now install Bootstrap in this project by using the following command.
  1. npm install --save bootstrap  
Now, open the index.js file and add import Bootstrap.
  1. 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. NavbarDemo.js
  2. Collapsedemo.js
  3. Tabsdemo.js 
Now open NavbarDemo.js file and add the following code in this component,
  1. import React, { Component } from 'react'  
  2. import './App.css';  
  3. import {  
  4.         Collapse,  
  5.         Navbar,  
  6.         NavbarToggler,  
  7.         Nav,  
  8.         NavItem,  
  9.         NavLink,  
  10.         UncontrolledDropdown,  
  11.         DropdownToggle,  
  12.         DropdownMenu,  
  13.         DropdownItem,  
  14. } from 'reactstrap';  
  15. export class NavbarDemo extends Component {  
  16.         render() {  
  17.                 return (  
  18.                         <div>  
  19.                                 <Navbar className="light" color="light" light expand="md">  
  20.                                         <NavbarToggler />  
  21.                                         <Collapse navbar>  
  22.                                                 <Nav navbar>  
  23.                                                         <NavItem>  
  24.                                                                 <NavLink>Home</NavLink>  
  25.                                                         </NavItem>  
  26.                                                         <NavItem>  
  27.                                                                 <NavLink>About</NavLink>  
  28.                                                         </NavItem>  
  29.                                                         <UncontrolledDropdown nav inNavbar>  
  30.                                                                 <DropdownToggle nav caret>  
  31.                                                                         Options  
  32.               </DropdownToggle>  
  33.                                                                 <DropdownMenu right>  
  34.                                                                         <DropdownItem>  
  35.                                                                                 Option 1  
  36.                 </DropdownItem>  
  37.                                                                         <DropdownItem>  
  38.                                                                                 Option 2  
  39.                 </DropdownItem>  
  40.                                                                 </DropdownMenu>  
  41.                                                         </UncontrolledDropdown>  
  42.                                                 </Nav>  
  43.                                         </Collapse>  
  44.                                 </Navbar>  
  45.   
  46.                         </div>  
  47.                 )  
  48.         }  
  49. }  
  50.   
  51. export default NavbarDemo  
 Now open App.js file and add the following code:
  1. import React from 'react';  
  2. import logo from './logo.svg';  
  3. import './App.css';  
  4. import NavbarDemo from './NavbarDemo'  
  5. function App() {  
  6.   return (  
  7.     <div className="App">  
  8.       <NavbarDemo></NavbarDemo>  
  9.     </div>  
  10.   );  
  11. }  
  12.   
  13. 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:
  1. import React, { Component } from 'react'  
  2. import { UncontrolledCollapse, Button, CardBody, Card } from 'reactstrap';  
  3. import { Collapse, Navbar, Nav, NavItem, NavLink } from 'reactstrap';  
  4. export class CollapseDemo extends Component {  
  5.         render() {  
  6.                 return (  
  7.                  <div>  
  8.                  <Navbar color="info" light expand="md">  
  9.                                 <Nav color="info" navbar>  
  10.                                   <NavItem className="hdr">  
  11.                                    <NavLink>Collapse Panel Using Reactstrap</NavLink>  
  12.                                      </NavItem>  
  13.                                  </Nav>  
  14.                                 </Navbar>  
  15.                                 <Button color="info" id="toggler" style={{ marginTop: '1rem' }}>  
  16.                                         Collapse  
  17.                                  </Button>  
  18.                                 <UncontrolledCollapse toggler="#toggler">  
  19.                                         <Card>  
  20.                                          <CardBody>  
  21.                                           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  
  22.                                          </CardBody>  
  23.                                         </Card>  
  24.                                 </UncontrolledCollapse>  
  25.                         </div>  
  26.   
  27.                 )  
  28.         }  
  29. }  
  30.   
  31. 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.
  1. import React, { useState } from 'react';  
  2. import { TabContent, TabPane, Navbar,Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col } from 'reactstrap';  
  3.   
  4. const TabsDemo = (props) => {  
  5.   const [activeTab, setActiveTab] = useState('1');  
  6.   
  7.   const toggle = tab => {  
  8.     if(activeTab !== tab) setActiveTab(tab);  
  9.   }  
  10.   
  11.   return (  
  12.     <div>  
  13.             <Navbar color="info" light expand="md">  
  14.                                 <Nav color="info" navbar>  
  15.                                   <NavItem className="hdr">  
  16.                                    <NavLink>Reactstrap Tabs Components</NavLink>  
  17.                                      </NavItem>  
  18.                                  </Nav>  
  19.                                 </Navbar>  
  20.       <Nav tabs>  
  21.         <NavItem>  
  22.           <NavLink  
  23.             className={({ active: activeTab === '1' })}  
  24.             onClick={() => { toggle('1'); }}  
  25.           >  
  26.             Tab1  
  27.           </NavLink>  
  28.         </NavItem>  
  29.         <NavItem>  
  30.           <NavLink  
  31.             className={({ active: activeTab === '2' })}  
  32.             onClick={() => { toggle('2'); }}  
  33.           >  
  34.             Tab2  
  35.           </NavLink>  
  36.         </NavItem>  
  37.         <NavItem>  
  38.           <NavLink  
  39.             className={({ active: activeTab === '3' })}  
  40.             onClick={() => { toggle('3'); }}  
  41.           >  
  42.            Tab3  
  43.           </NavLink>  
  44.         </NavItem>  
  45.       </Nav>  
  46.       <TabContent activeTab={activeTab}>  
  47.         <TabPane tabId="1">  
  48.           <Row>  
  49.             <Col sm="12">  
  50.               <h4>Tab 1 Contents</h4>  
  51.             </Col>  
  52.           </Row>  
  53.         </TabPane>  
  54.         <TabPane tabId="2">  
  55.           <Row>  
  56.             <Col sm="12">  
  57.               <h4>Tab 2 Contents</h4>  
  58.             </Col>  
  59.           </Row>  
  60.         </TabPane>  
  61.         <TabPane tabId="3">  
  62.           <Row>  
  63.             <Col sm="12">  
  64.               <h4>Tab 3 Contents</h4>  
  65.             </Col>  
  66.           </Row>  
  67.         </TabPane>  
  68.       </TabContent>  
  69.     </div>  
  70.   );  
  71. }  
  72.   
  73. export default TabsDemo;  
Now open App.js file and add the following code,
  1. import React from 'react';  
  2. import logo from './logo.svg';  
  3. import './App.css';  
  4. import TabsDemo from './TabsDemo'  
  5. function App() {  
  6.   return (  
  7.     <div className="App">  
  8.       <TabsDemo></TabsDemo>  
  9.     </div>  
  10.   );  
  11. }  
  12.   
  13. 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.


Similar Articles