Getting Started with React Development with the React Suite Library — Modal

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Modal

We can add a modal into our React app with the Modal component.

For instance, we can write:

import React, { useState } from "react";
import { Modal, ButtonToolbar, Button, Paragraph } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [show, setShow] = useState();
  const open = () => {
    setShow(true);
  };

  const close = () => {
    setShow(false);
  };
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open</Button>
      </ButtonToolbar>
      <Modal show={show} onHide={close}>
        <Modal.Header>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>hello </Modal.Body>
        <Modal.Footer>
          <Button onClick={close} appearance="primary">
            Ok
          </Button>
          <Button onClick={close} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

We create the show state with the open function to set it to true and the close function to set it to false .

In the Modal component, we have the show prop set to the show state to control whether the modal is shown.

We pass the close function to all the button’s onClick props to close the modal when we click them.

Modal.Header has the header.

Modal.Title has the title.

Modal.Body has the body.

Modal.Footer has the modal footer.

We can disable the backdrop with the backdrop prop set to false :

import React, { useState } from "react";
import { Modal, ButtonToolbar, Button, Paragraph } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [show, setShow] = useState();
  const open = () => {
    setShow(true);
  };

  const close = () => {
    setShow(false);
  };
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open</Button>
      </ButtonToolbar>
      <Modal show={show} onHide={close} backdrop={false}>
        <Modal.Header>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>hello </Modal.Body>
        <Modal.Footer>
          <Button onClick={close} appearance="primary">
            Ok
          </Button>
          <Button onClick={close} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

The size of the modal can be changed with the size prop:

import React, { useState } from "react";
import { Modal, ButtonToolbar, Button, Paragraph } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [show, setShow] = useState();
  const open = () => {
    setShow(true);
  };

  const close = () => {
    setShow(false);
  };
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open</Button>
      </ButtonToolbar>
      <Modal show={show} onHide={close} size="xs">
        <Modal.Header>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>hello </Modal.Body>
        <Modal.Footer>
          <Button onClick={close} appearance="primary">
            Ok
          </Button>
          <Button onClick={close} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

We set it to xs to set it to the smallest size.

Other options includes sm for small, md for medium, and lg for large.

The full prop will make it large.

Conclusion

We can add a modal into our React app with React Suite.