Category: Reactstrap

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 get started with Reactstrap and display alerts.

Getting started

We can install Reactstrap by running:

npm install --save reactstrap

Then we can import the components we need.

We also need to install Bootstrap since the Bootstrap CSS isn’t included.

So we can write:

npm install --save bootstrap

Then we can import it by writing:

import 'bootstrap/dist/css/bootstrap.min.css';

Alerts

We can add alerts with the Alert component.

For instance, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Alert color="primary">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="secondary">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="success">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="danger">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="warning">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="info">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="light">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
      <Alert color="dark">
        <a href="#" className="alert-link">
          link
        </a>{" "}
        message
      </Alert>
    </div>
  );
}

We have the Alert component with the color prop to set the color.

className has the color for the link.

Additional Content for Alerts

We can add extra content to alerts.

For example, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Alert color="primary">
        <h4 className="alert-heading">title</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut arcu
          lacinia, condimentum sapien et, molestie eros. Nulla a molestie ante,
          vitae scelerisque odio. Integer ipsum quam, viverra quis ipsum
          dapibus,
        </p>
        <hr />
        <p className="mb-0">
          Fusce vitae eros varius, consequat mi at, consequat urna. Sed egestas
          nisl quis magna rutrum tincidunt ac eu tortor.
        </p>
      </Alert>
    </div>
  );
}

We added p and hr elements to our alert.

mb-0 removes the bottom margin.

Dismissing Alerts

We can make alerts dismissible by making them controlled components.

For instance, we can write:

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

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

  const onDismiss = () => setVisible(false);

  return (
    <div className="App">
      <Alert color="info" isOpen={visible} toggle={onDismiss}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Alert>
    </div>
  );
}

We have the visible state to toggle the alert on or off.

It’s passed into the isOpen prop to toggle the alert.

toggle has the onDismiss function to set visible to false to make the alert disappear.

The close button is shown and we can click it to call onDismiss .

Uncontrolled Alerts

We can make dismissible alerts without making them uncontrolled.

To do that, we can import the UncontrolledAlert component.

For instance, we can write:

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

export default function App() {
  return (
    <div className="App">
      <UncontrolledAlert color="info">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </UncontrolledAlert>
    </div>
  );
}

Now we don’t need the state change logic that we had before.

Alerts without Fade

By default, the alert has the fade transition effect.

To disable the fade effect, we can set the fade prop to false :

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

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

  const onDismiss = () => setVisible(false);

  return (
    <div className="App">
      <Alert color="primary" isOpen={visible} toggle={onDismiss} fade={false}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Alert>
    </div>
  );
}

We added the prop in the controlled alert.

Also, we can do the same with uncontrolled alerts:

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

export default function App() {
  return (
    <div className="App">
      <UncontrolledAlert color="info" fade={false}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </UncontrolledAlert>
    </div>
  );
}

Conclusion

We can install the Reactstrap and Bootstrap packages to add Reactstrap to our app.

Also, we can use alerts to display notifications.

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 modals with Reactstrap.

Nested Modals

We can add nested modals with Reactstrap.

For instance, we can write:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

export default function App() {
  const [modal, setModal] = useState(false);
  const [nestedModal, setNestedModal] = useState(false);
  const [closeAll, setCloseAll] = useState(false);

const toggle = () => setModal(!modal);
  const toggleNested = () => {
    setNestedModal(!nestedModal);
    setCloseAll(false);
  };
  const toggleAll = () => {
    setNestedModal(!nestedModal);
    setCloseAll(true);
  };

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        open modal
      </Button>
      <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
          scelerisque nisl dolor,
          <br />
          <Button color="success" onClick={toggleNested}>
            Show Nested Modal
          </Button>
          <Modal
            isOpen={nestedModal}
            toggle={toggleNested}
            onClosed={closeAll ? toggle : undefined}
          >
            <ModalHeader>Nested Modal title</ModalHeader>
            <ModalBody>
              Suspendisse non augue erat. Nunc nec eleifend ligula.{" "}
            </ModalBody>
            <ModalFooter>
              <Button color="primary" onClick={toggleNested}>
                Done
              </Button>
              <Button color="secondary" onClick={toggleAll}>
                All Done
              </Button>
            </ModalFooter>
          </Modal>
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

We have the Modal component inside another Modal component to display our nested modal.

The inner one will show on top of the outer one.

We have states to open and close each modal and we pass that to the isOpen prop.

Modals with Custom Transition Timeouts

The transition duration can change with Reactstrap modals.

For instance,e we write:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

export default function App() {
  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        open modal
      </Button>
      <Modal
        isOpen={modal}
        modalTransition={{ timeout: 1000 }}
        backdropTransition={{ timeout: 2000 }}
        toggle={toggle}
      >
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
          scelerisque nisl dolor,
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

to change the modal and backdrop transition durations.

modalTransition takes an object with the timeout property to change how long to wait until the modal is displayed.

Likewise, we have the backdropTransition prop that also has the timeout property to change the wait time until when the backdrop is displayed.

All the times are in milliseconds.

Modals with External Button

We can add an external component as the close button for the modal.

All we have to do is to set the external prop of the Modal .

For example, we can write:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

export default function App() {
  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  const externalCloseBtn = (
    <button
      className="close"
      style={{ position: "absolute", top: "45px", right: "15px" }}
      onClick={toggle}
    >
      x
    </button>
  );

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        open modal
      </Button>
      <Modal isOpen={modal} toggle={toggle} external={externalCloseBtn}>
        <ModalHeader>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
          scelerisque nisl dolor, eu aliquam nulla volutpat sed. Cras velit ex,
          aliquam quis lobortis vel, fermentum at leo. Donec hendrerit, ligula
          in ultricies suscipit, ante justo tempus erat, et cursus odio arcu ac
          lorem.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

to add the external component to the external prop of the modal.

Conclusion

We can change various options of the modal.

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 modals with Reactstrap.

Modals with a Custom Close Icon

We can change the close icon of the button with the charCode prop.

For instance, we can write:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

export default function App() {
  const [modal, setModal] = useState(false);

const toggle = () => setModal(!modal);

return (
    <div>
      <Button color="danger" onClick={toggle}>
        open modal
      </Button>
      <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader toggle={toggle} charCode="close">
          Modal title
        </ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>{" "}
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

We set the charCode prop to 'close' so that it’s displayed as the close button value.

Clean Up

We can change the cleanup options of our modal.

If the unmountOnClose options is false , then the data we entered into the modal stays available after we close it.

This is because it’s not completely unmounted.

For example, we can write:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Input,
  Form
} from "reactstrap";

export default function App() {
  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  return (
    <div>
      <Form inline onSubmit={e => e.preventDefault()}>
        <Button color="danger" onClick={toggle}>
          open modal
        </Button>
      </Form>
      <Modal isOpen={modal} toggle={toggle} unmountOnClose={false}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          <Input type="textarea" placeholder="Write something" rows={5} />
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>{" "}
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

to create a modal with a text area inside it.

When we type something, it’ll still be available after we close and open the modal again.

Focus After Close

We can make our modal focus on the button that opened it after it’s closed.

To do that, we set the returnFocusAfterClose to true .

For example, we can write:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Input,
  Label,
  Form,
  FormGroup
} from "reactstrap";

export default function App() {
  const [open, setOpen] = useState(false);

  const toggle = () => setOpen(!open);

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        Open
      </Button>

      <Modal returnFocusAfterClose isOpen={open}>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
          scelerisque nisl dolor, eu aliquam nulla volutpat sed. Cras velit ex,
          aliquam quis lobortis vel, fermentum at leo. Donec hendrerit, ligula
          in ultricies suscipit, ante justo tempus erat, et cursus odio arcu ac
          lorem.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Close
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

Once we close the modal, the Open button will be focused.

This is because we have the returnFocusAfterClose prop added.

Conclusion

We can return focus to the element that opened the modal.

Also, the close button text and clean up options can be changed.

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 media lists with Reactstrap.

Media List

We can add the list prop to the Media component to make it a list.

For example, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Media list>
        <Media tag="li">
          <Media left href="#">
            <Media object src="http://placekitten.com/201/201" alt="cat" />
          </Media>
          <Media body>
            <Media heading>Media heading</Media>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <Media>
              <Media left href="#">
                <Media object src="http://placekitten.com/201/201" alt="cat" />
              </Media>
              <Media body>
                <Media heading>Nested media heading</Media>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                <Media>
                  <Media left href="#">
                    <Media
                      object
                      src="http://placekitten.com/201/201"
                      alt="cat"
                    />
                  </Media>
                  <Media body>
                    <Media heading>Nested media heading</Media>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  </Media>
                </Media>
              </Media>
            </Media>
            <Media>
              <Media left href="#">
                <Media object src="http://placekitten.com/201/201" alt="cat" />
              </Media>
              <Media body>
                <Media heading>Nested media heading</Media>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </Media>
            </Media>
          </Media>
        </Media>
        <Media tag="li">
          <Media body>
            <Media heading>Media heading</Media>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </Media>
          <Media right href="#">
            <Media object data-src="http://placekitten.com/201/201" alt="cat" />
          </Media>
        </Media>
      </Media>
    </div>
  );
}

to add a nested list with the Media component.

tag lets us set the tag to render the component as.

The list prop lets us render the Media component as a ul element.

Modals

We can add a modal with the Modal component.

For instance, we can write:

import React from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

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

  const toggle = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        open modal
      </Button>
      <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
          sollicitudin tortor eu velit laoreet, vitae eleifend ipsum aliquam.
          Vivamus porta est eu auctor sodales.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

We added a Button to let us open the modal.

This is done by clicking the toggle fucntion into the onClick prop.

It’ll set modal to true to open the modal.

modal is passed into the isOpen prop of the Modal to control the modal open state.

The toggle component lets us controls the toggle.

ModalHeader has the modal header.

ModalBody has the modal body.

ModalFooter has the modal footer.

Modal Backdrop

The modal backdrop can be controlled with the backdrop prop.

If we set it to false , then the backdrop is disabled.

For example, we can write:

import React from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

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

  const toggle = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        open modal
      </Button>
      <Modal isOpen={modal} toggle={toggle} backdrop={false}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
          sollicitudin tortor eu velit laoreet, vitae eleifend ipsum aliquam.
          Vivamus porta est eu auctor sodales.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

Since the backdrop prop is set to false , there’s no backdrop when we open the modal.

We can also set it to 'static' to disable closing by clicking away or with the Esc key.

Conclusion

We can render the Media component as a list.

Also, we can add modals with various kinds of content and options.

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 media with Reactstrap.

Media

Media is a container that can hold images and text.

To use it, we import the Media component and write:

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

export default function App() {
  return (
    <div className="App">
      <Media>
        <Media left href="#">
          <Media object src="http://placekitten.com/200/200" alt="cat" />
        </Media>
        <Media body>
          <Media heading>Media heading</Media>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
          sollicitudin tortor eu velit laoreet, vitae eleifend ipsum aliquam.
          Vivamus porta est eu auctor sodales. Aliquam et dolor vel augue tempor
          ullamcorper. Etiam velit lacus, blandit at gravida sit amet, pulvinar
          et est. Pellentesque pharetra ultricies magna non vehicula.
          Pellentesque placerat lacus ac tincidunt accumsan. Praesent turpis
          arcu, eleifend id orci vel, rhoncus lobortis magna.
        </Media>
      </Media>
    </div>
  );
}

We used the Media component as a container for content.

Also, we used it to display an image by adding the object , src and alt props.

We also used it with the body prop to display content.

The heading prop makes it a heading

Body text doesn’t need to be between any tags.

Nesting

We can nest Media components.

For example, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Media>
        <Media left href="#">
          <Media object src="http://placekitten.com/200/200" alt="cat" />
        </Media>
        <Media body>
          <Media heading>Media heading</Media>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
          sollicitudin tortor eu velit laoreet, vitae eleifend ipsum aliquam.
          Vivamus porta est eu auctor sodales. Aliquam et dolor vel augue tempor
          ullamcorper. Etiam velit lacus, blandit at gravida sit amet, pulvinar
          et est. Pellentesque pharetra ultricies magna non vehicula.
          Pellentesque placerat lacus ac tincidunt accumsan. Praesent turpis
          arcu, eleifend id orci vel, rhoncus lobortis magna.
          <Media>
            <Media left href="#">
              <Media object src="http://placekitten.com/201/201" cat="cat" />
            </Media>
            <Media body>
              <Media heading>Nested media heading</Media>
              Aliquam et dolor vel augue tempor ullamcorper. Etiam velit lacus,
              blandit at gravida sit amet, pulvinar et est. Pellentesque
              pharetra ultricies magna non vehicula. Pellentesque placerat lacus
              ac tincidunt accumsan. Praesent turpis arcu, eleifend id orci vel,
              rhoncus lobortis magna.
            </Media>
          </Media>
        </Media>
      </Media>
    </div>
  );
}

We nested the Media components to add an image with text side by side inside the outer Media component.

Alignment

The Media component has props to change the alignment of the media.

For example, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Media>
        <Media left top href="#">
          <Media object src="http://placekitten.com/200/200" alt="cat" />
        </Media>
        <Media body>
          <Media heading>Media heading</Media>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
          sollicitudin tortor eu velit laoreet, vitae eleifend ipsum aliquam.
          Vivamus porta est eu auctor sodales.
        </Media>
      </Media>
    </div>
  );
}

We added the left and top props to align the image to the top left.

Also, we can use the middle and bottom props to align the media to the middle or the bottom.

Conclusion

We can use the Media component as containers for text and images.