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 and basic Reactstrap components in Reactjs applications from the below links.
In this article we will discuss the following Reactstrap components,
  • Buttons
  • Popovers
  • Progress
Prerequisites
  • We should have a basic knowledge of HTML and JavaScript.
  • Visual Studio Code should 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
Reactstrap does not include Bootstrap CSS; to use Bootstrap css we need to add Bootstrap, for that use 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,
  • ProgressDemo.js
  • PopoversDemo.js
  • ButtonsDemo.js
Now open ProgressDemo.js file and add the following code in this component,
  1. import React, { Component } from 'react'
  2. import { Progress } from 'reactstrap';
  3. import { Navbar, Nav, NavItem, NavLink } from 'reactstrap';
  4. import './App.css';
  5. export class ProgressDemo extends Component {
  6. render() {
  7. return (
  8. <div>
  9. <Navbar className="btn btn-warning" light expand="md">
  10. <Nav color="info" navbar>
  11. <NavItem className="hdr">
  12. <NavLink style={{ "color": "white" }} >Reactstrap Progress Components</NavLink>
  13. </NavItem>
  14. </Nav>
  15. </Navbar>
  16. <div className="text-center">0%</div>
  17. <Progress />
  18. <div className="text-center">25%</div>
  19. <Progress value="25" />
  20. <div className="text-center">50%</div>
  21. <Progress value={50} />
  22. </div>
  23. )
  24. }
  25. }
  26. export default ProgressDemo
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 ProgressDemo from './ProgressDemo'
  6. function App() {
  7. return (
  8. <div className="App">
  9. <ProgressDemo></ProgressDemo>
  10. </div>
  11. );
  12. }
  14. export default App;
Now open App.css file and add the following css class,
  1. .hdr{
  2. padding-left: 600px;
  3. }
Run the project by using 'npm start' and check the result.
Now open PopoversDemo.js file and add the following code in this component,
  1. import React, { Component } from 'react'
  2. import { Navbar, Nav, NavItem, NavLink } from 'reactstrap';
  3. import { Button, UncontrolledPopover, PopoverHeader, PopoverBody } from 'reactstrap';
  4. export class PopoversDemo extends Component {
  5. render() {
  6. return (
  7. <div>
  8. <Navbar className="btn btn-warning" light expand="md">
  9. <Nav color="info" navbar>
  10. <NavItem className="hdr">
  11. <NavLink style={{ "color": "white" }} >Reactstrap Popover Components</NavLink>
  12. </NavItem>
  13. </Nav>
  14. </Navbar>
  15. <div>
  16. <Button color="primary" id="PopoverClick" type="button">
  17. Launch Popover
  18. </Button>
  19. <UncontrolledPopover trigger="click" placement="bottom" target="PopoverClick">
  20. <PopoverHeader>Click Here</PopoverHeader>
  21. <PopoverBody>Popover Here</PopoverBody>
  22. </UncontrolledPopover>
  23. </div>
  24. </div>
  25. )
  26. }
  27. }
  28. export default PopoversDemo
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 PopoversDemo from './PopoversDemo'
  6. function App() {
  7. return (
  8. <div className="App">
  9. <PopoversDemo></PopoversDemo>
  10. </div>
  11. );
  12. }
  14. export default App;
Run the project by using 'npm start' and check the result.
Now open ButtonsDemo.js file and add the following code in this component,
  1. import React, { Component } from 'react'
  2. import { Button } from 'reactstrap';
  3. import { Navbar, Nav, NavItem, NavLink } from 'reactstrap';
  4. export class ButtonsDemo extends Component {
  5. render() {
  6. return (
  7. <div>
  8. <Navbar className="btn btn-warning" light expand="md">
  9. <Nav color="info" navbar>
  10. <NavItem className="hdr">
  11. <NavLink style={{ "color": "white" }} >Reactstrap Button Components</NavLink>
  12. </NavItem>
  13. </Nav>
  14. </Navbar>
  15. <div style={{"marginTop":"20px"}}>
  16. <Button color="primary">primary</Button>
  17. <Button color="secondary">secondary</Button>
  18. <Button color="success">success</Button>
  19. <Button color="info">info</Button>
  20. <Button color="warning">warning</Button>
  21. <Button color="danger">danger</Button>
  22. <Button color="link">link</Button>
  23. </div>
  25. <Navbar style={{"marginTop":"20px"}} className="btn btn-warning" light expand="md">
  26. <Nav color="info" navbar>
  27. <NavItem className="hdr">
  28. <NavLink style={{ "color": "white" }} >Outline Button </NavLink>
  29. </NavItem>
  30. </Nav>
  31. </Navbar>
  32. <div style={{"marginTop":"20px"}}>
  33. <Button outline color="primary">primary</Button>
  34. <Button outline color="secondary">secondary</Button>
  35. <Button outline color="success">success</Button>
  36. <Button outline color="info">info</Button>
  37. <Button outline color="warning">warning</Button>
  38. <Button outline color="danger">danger</Button>
  39. </div>
  40. </div>
  41. )
  42. }
  43. }
  45. export default ButtonsDemo
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 ButtonsDemo from './ButtonsDemo'
  6. function App() {
  7. return (
  8. <div className="App">
  9. <ButtonsDemo></ButtonsDemo>
  10. </div>
  11. );
  12. }
  14. export default App;
Run the project by using 'npm start' and check the result.

Summary

In this article we learned how to use Buttons, Popovers, and Progress in Reactstrap components. Reactstrap is a component library for ReactJS.