Category: React

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add a pagination bar with Reactstrap.

Pagination

We can add a pagination bar easily with the Pagination , PaginationLink , and PaginationItem components.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Pagination, PaginationItem, PaginationLink } from "reactstrap";

export default function App() {
  return (
    <div>
      <Pagination>
        <PaginationItem>
          <PaginationLink first href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink previous href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">4</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">5</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink next href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink last href="#" />
        </PaginationItem>
      </Pagination>
    </div>
  );
}

to add the Pagination component.

It’s the wrapper for the item and links.

PaginationItem has the pagination item.

And PaginationLink has the link.

The first prop shows the double left arrow.

The previous prop shows the left arrow.

The next prop shows the right arrow.

And the last prop shows the double right arrow.

href has the URL for the links.

Disabled and Active States

We can add the disabled prop to disable the pagination item.

And we can add the active prop to highlight the pagination item.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Pagination, PaginationItem, PaginationLink } from "reactstrap";

export default function App() {
  return (
    <div>
      <Pagination>
        <PaginationItem>
          <PaginationLink first href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink previous href="#" />
        </PaginationItem>
        <PaginationItem disabled>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem active>
          <PaginationLink href="#">2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">4</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">5</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink next href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink last href="#" />
        </PaginationItem>
      </Pagination>
    </div>
  );
}

We added the disabled and active props to the PaginationItem to add the effects.

Once it’s disabled, we can’t click on it.

Sizing

The size of the pagination bar can be changed.

We just have to change it with the size prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Pagination, PaginationItem, PaginationLink } from "reactstrap";

export default function App() {
  return (
    <div>
      <Pagination size="lg">
        <PaginationItem>
          <PaginationLink first href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink previous href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">4</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">5</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink next href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink last href="#" />
        </PaginationItem>
      </Pagination>
    </div>
  );
}

We set size to lg to make the items large.

Setting the size to sm will make it small:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Pagination, PaginationItem, PaginationLink } from "reactstrap";

export default function App() {
  return (
    <div>
      <Pagination size="sm">
        <PaginationItem>
          <PaginationLink first href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink previous href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">4</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">5</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink next href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink last href="#" />
        </PaginationItem>
      </Pagination>
    </div>
  );
}

Conclusion

We can add a pagination bar with the Pagination , PaginationItem , and PaginationLink components.

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add a navbar and nav with Reactstrap.

Vertical Nav

A nav component can be vertical.

It’s useful for displaying links vertically.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Nav, NavItem, NavLink } from "reactstrap";

export default function App() {
  return (
    <div>
      <Nav vertical>
        <NavLink href="#">foo</NavLink>
        <NavLink href="#">bar</NavLink>
        <NavLink href="#">baz</NavLink>
        <NavLink disabled href="#">
          disabled
        </NavLink>
      </Nav>
    </div>
  );
}

All we did is ad the vertical prop to the Nav and it’ll render vertically.

We can do the same thing with a list-based nav:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Nav, NavItem, NavLink } from "reactstrap";

export default function App() {
  return (
    <div>
      <Nav vertical>
        <NavItem>
          <NavLink href="#">foo</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">bar</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">baz</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            disabled
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

Tabs

We can disable navs in tab form.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Nav,
  NavItem,
  Dropdown,
  DropdownItem,
  DropdownToggle,
  DropdownMenu,
  NavLink
} from "reactstrap";

export default function App() {
  const [dropdownOpen, setDropdownOpen] = React.useState(false);

  const toggle = () => setDropdownOpen(!dropdownOpen);

  return (
    <div>
      <Nav tabs>
        <NavItem>
          <NavLink href="#" active>
            link
          </NavLink>
        </NavItem>
        <Dropdown nav isOpen={dropdownOpen} toggle={toggle}>
          <DropdownToggle nav caret>
            drop down
          </DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>1</DropdownItem>
            <DropdownItem disabled>2</DropdownItem>
            <DropdownItem>3</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>4</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <NavItem>
          <NavLink href="#">another link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">some Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            disabled
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

We have a Nav with the tabs prop to display the nav as tabs.

And we have the NavItem component to display the nav item.

NavLink has the link.

We can add a dropdown to it with the Dropdown component.

Inside it, we have the DropdownToggle and DropdownMenu components.

The drop down is controlled with the isOpen prop, which is controlled by the toggle callback.

The nav prop makes it fit within the nav.

The active prop highlights the nav item.

Pills

We can also display navs in pills form.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Nav,
  NavItem,
  Dropdown,
  DropdownItem,
  DropdownToggle,
  DropdownMenu,
  NavLink
} from "reactstrap";

export default function App() {
  const [dropdownOpen, setDropdownOpen] = React.useState(false);

  const toggle = () => setDropdownOpen(!dropdownOpen);

  return (
    <div>
      <Nav pills>
        <NavItem>
          <NavLink href="#" active>
            link
          </NavLink>
        </NavItem>
        <Dropdown nav isOpen={dropdownOpen} toggle={toggle}>
          <DropdownToggle nav caret>
            drop down
          </DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>1</DropdownItem>
            <DropdownItem disabled>2</DropdownItem>
            <DropdownItem>3</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>4</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <NavItem>
          <NavLink href="#">another link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">some Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            disabled
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

All we did is switch the tabs prop with the pills prop.

Conclusion

We can display navs in various ways.

They can be shown as tabs or pills.

We can also add dropdowns into them.

And they can also be vertical.

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add a navbar and nav with Reactstrap.

Basic Navbar

We can create a navbar with various components put together.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  NavbarText
} from "reactstrap";

export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);

const toggle = () => setIsOpen(!isOpen);

return (
    <div>
      <Navbar color="light" light expand="md">
        <NavbarBrand href="/">app</NavbarBrand>
        <NavbarToggler onClick={toggle} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="mr-auto" navbar>
            <NavItem>
              <NavLink href="/foo/">foo</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="https://example.com">example</NavLink>
            </NavItem>
            <UncontrolledDropdown nav inNavbar>
              <DropdownToggle nav caret>
                options
              </DropdownToggle>
              <DropdownMenu right>
                <DropdownItem>option 1</DropdownItem>
                <DropdownItem>option 2</DropdownItem>
                <DropdownItem divider />
                <DropdownItem>reset</DropdownItem>
              </DropdownMenu>
            </UncontrolledDropdown>
          </Nav>
          <NavbarText>more text</NavbarText>
        </Collapse>
      </Navbar>
    </div>
  );
}

Narbar is the whole navbar container. We can change the color with the color prop.

light makes the color light.

expand has the breakpoint to expand the navbar to the full navbar.

NavbarBrand has the brand name or logo.

NavItem has the nav item

NavLink is a link on the navbar.

UncontrolledDropdown is a dropdown.

We need the nav and inNavbar props to make it fit within the navbar.

DropdownToggle has the dropdown toggle.

NavbarText has the text.

NavbarToggler has the toggle for the navbar menu.

We put them all in the Collapse component so that they collapse when the breakpoint is less than the one specified with expand .

NavbarToggler

NavbarToggler should be after the NavbarBrand so that it appears on the right.

We can flip the order to have it appear on the left.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink
} from "reactstrap";

export default function App() {
  const [collapsed, setCollapsed] = React.useState(true);

const toggleNavbar = () => setCollapsed(!collapsed);

return (
    <div>
      <Navbar color="faded" light>
        <NavbarBrand href="/" className="mr-auto">
          app
        </NavbarBrand>
        <NavbarToggler onClick={toggleNavbar} className="mr-2" />
        <Collapse isOpen={!collapsed} navbar>
          <Nav navbar>
            <NavItem>
              <NavLink href="/foo/">foo</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="https://example.com">GitHub</NavLink>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
}

to add a navbar with the Navbar component.

Then we add the NavbarBrand and NavbarToggler win the order we want.

It takes an onClick prop to let us toggle the navbar by setting the collapsed state.

Nav

A Nav component is another component for navigation.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Nav, NavItem, NavLink } from "reactstrap";

export default function App() {
  return (
    <div>
      <Nav>
        <NavItem>
          <NavLink href="#">foo</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">bar</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">baz</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            disabled
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

We have the Nav component with the NavItem and NavLink components inside it to add the links.

Also, we can just nest the NavLink with the Nav component by writing:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Nav, NavItem, NavLink } from "reactstrap";

export default function App() {
  return (
    <div>
      <Nav>
        <NavLink href="#">foo</NavLink>
        <NavLink href="#">bar</NavLink>
        <NavLink href="#">baz</NavLink>
        <NavLink disabled href="#">
          disabled
        </NavLink>
      </Nav>
    </div>
  );
}

The disabled prop disables the NavLink in both examples.

Conclusion

We can add navbars and navs easily with Reactstrap.

They’re responsive so they work with all screen sizes.

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add popovers with Reactstrap.

Popovers Placements

Popover placements can be placed in various positions.

We just have to change the placement prop to change the placement.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Popover, PopoverHeader, PopoverBody } from "reactstrap";

export default function App() {
  const [popoverOpen, setPopoverOpen] = React.useState(false);

  const toggle = () => setPopoverOpen(!popoverOpen);

  return (
    <div>
      <Button id="Popover" type="button">
        Launch Popover
      </Button>
      <Popover
        placement="bottom"
        isOpen={popoverOpen}
        target="Popover"
        toggle={toggle}
      >
        <PopoverHeader>Popover Title</PopoverHeader>
        <PopoverBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
          fermentum lacus
        </PopoverBody>
      </Popover>
    </div>
  );
}

to set the placement to bottom with the placement prop.

Other possible values include top , left , and right .

UncontrolledPopovers

We don’t need to control the state of the popover to open or close it.

This can be done with the UncontroledPopover component.

This is useful if we don’t need to control the popover programmatically.

For instance, we can use it by writing:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Button,
  UncontrolledPopover,
  PopoverHeader,
  PopoverBody
} from "reactstrap";

export default function App() {
  return (
    <div>
      <Button id="UncontrolledPopover" type="button">
        Launch Popover
      </Button>
      <UncontrolledPopover placement="bottom" target="UncontrolledPopover">
        <PopoverHeader>Popover Title</PopoverHeader>
        <PopoverBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
          fermentum lacus
        </PopoverBody>
      </UncontrolledPopover>
    </div>
  );
}

We have the Button and the UncontrolledPopover component to let us toggle the popover.

The id of the trigger component and the target of the UncontrolledPopover has to match.

Repositioning Popovers

We can reposition popover content on update.

For instance, we can write;

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Button,
  UncontrolledPopover,
  PopoverHeader,
  PopoverBody,
  Collapse
} from "reactstrap";

const PopoverContent = ({ scheduleUpdate }) => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <PopoverHeader>Update</PopoverHeader>
      <PopoverBody>
        <Button onClick={() => setIsOpen(!isOpen)}>Click me</Button>
        <Collapse
          isOpen={isOpen}
          onEntered={scheduleUpdate}
          onExited={scheduleUpdate}
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
          fermentum lacus
        </Collapse>
      </PopoverBody>
    </>
  );
};

export default function App() {
  return (
    <div className="text-center">
      <Button id="ScheduleUpdateButton" type="button">
        Open Popover
      </Button>
      <UncontrolledPopover
        trigger="click"
        placement="top"
        target="ScheduleUpdateButton"
      >
        {({ scheduleUpdate }) => (
          <PopoverContent scheduleUpdate={scheduleUpdate} />
        )}
      </UncontrolledPopover>
    </div>
  );
}

We create the PopoverContent component that takes a scheduleUpdate prop to lets us change the position when we click on a button.

The PopoverContent component to call scheduleUpdate when the Collapse content is shown or hidden.

The onEntered callback is run when the content is shown and onExited callback is run when the content is hidden.

Conclusion

Popover placements can be changed statically or dynamically.

Also, we can add an UncontrolledPopover to let us display a popover without controlling its state.

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add buttons with Reactstrap.

Buttons

Reactstrap comes with its own button component.

To add it, we use the Button component:

import React from "react";
import { Button } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Button color="primary" className="mr-2">
        primary
      </Button>
      <Button color="secondary" className="mr-2">
        secondary
      </Button>
      <Button color="success" className="mr-2">
        success
      </Button>
      <Button color="info" className="mr-2">
        info
      </Button>
      <Button color="warning" className="mr-2">
        warning
      </Button>
      <Button color="danger" className="mr-2">
        danger
      </Button>
      <Button color="link" className="mr-2">
        link
      </Button>
    </>
  );
}

We add the Button component with the color prop to change the color of the button.

The mr-2 class adds some right margins.

Outline Buttons

Buttons can also have outline styles.

To add them, we add the outline prop:

import React from "react";
import { Button } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Button outline color="primary" className="mr-2">
        primary
      </Button>
      <Button outline color="secondary" className="mr-2">
        secondary
      </Button>
      <Button outline color="success" className="mr-2">
        success
      </Button>
      <Button outline color="info" className="mr-2">
        info
      </Button>
      <Button outline color="warning" className="mr-2">
        warning
      </Button>
      <Button outline color="danger" className="mr-2">
        danger
      </Button>
      <Button outline color="link" className="mr-2">
        link
      </Button>
    </>
  );
}

Sizes

We can add the size prop to change the size.

lg makes it big and sm makes it small.

We can add that by writing:

import React from "react";
import { Button } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Button color="primary" size="lg">
        Large Button
      </Button>
      <Button color="primary" size="sm">
        Small Button
      </Button>
    </>
  );
}

We added a large and small button with the size prop.

To make the button a block element, we can use the block prop:

import React from "react";
import { Button } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Button color="primary" size="lg" block>
        Large Button
      </Button>
    </>
  );
}

This will then span the whole row.

Active State

To make a button show the active state, we can add the active prop.

For example, we can write:

import React from "react";
import { Button } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Button color="primary" size="lg" active>
        Large Button
      </Button>
    </>
  );
}

The active state will be darker than the non-active state.

Disabled State

We can disable a button with the disabled prop.

For example, we can write:

import React from "react";
import { Button } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Button color="primary" size="lg" disabled>
        Large Button
      </Button>
    </>
  );
}

Checkbox and Radio Buttons

We can make radio buttons out of Button components.

To do that, we put them in a button group.

For instance, we can write:

import React from "react";
import { Button, ButtonGroup } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [rSelected, setRSelected] = React.useState(null);

  return (
    <>
      <ButtonGroup>
        <Button
          color="primary"
          onClick={() => setRSelected(1)}
          active={rSelected === 1}
        >
          apple
        </Button>
        <Button
          color="primary"
          onClick={() => setRSelected(2)}
          active={rSelected === 2}
        >
          orange
        </Button>
        <Button
          color="primary"
          onClick={() => setRSelected(3)}
          active={rSelected === 3}
        >
          grape
        </Button>
      </ButtonGroup>
    </>
  );
}

We have a ButtonGroup to group all the buttons together.

Then we have the onClick prop for each button to set the rSelected state.

The active prop let us set the condition for it to be active.

We can also use buttons as checkbox buttons.

For example, we can write:

import React from "react";
import { Button, ButtonGroup } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [cSelected, setCSelected] = React.useState([]);

  const onCheckboxBtnClick = selected => {
    const index = cSelected.indexOf(selected);
    if (index < 0) {
      cSelected.push(selected);
    } else {
      cSelected.splice(index, 1);
    }
    setCSelected([...cSelected]);
  };

  return (
    <>
      <ButtonGroup>
        <Button
          color="primary"
          onClick={() => onCheckboxBtnClick(1)}
          active={cSelected.includes(1)}
        >
          apple
        </Button>
        <Button
          color="primary"
          onClick={() => onCheckboxBtnClick(2)}
          active={cSelected.includes(2)}
        >
          orange
        </Button>
        <Button
          color="primary"
          onClick={() => onCheckboxBtnClick(3)}
          active={cSelected.includes(3)}
        >
          grape
        </Button>
      </ButtonGroup>
    </>
  );
}

We have the onCheckboxBtnClick function that runs to remove the selection if it already exists.

Otherwise, it adds it to the cSelected array.

The active prop’s condition now checks if the selection is in the cSelected array instead of checking for equality.

This is because checkboxes can save multiple choices.

Conclusion

Buttons have many uses. They can be used individually or as checkboxes or radio buttons.