Getting Started with React Development with the React Suite Library — Modal
Tags: react, webdev, programming, javascript
Published: 2021-01-18 21:41:07

**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.