Skip to main content

Modal Konfirmasi Menggunakan Promise Pada Aplikasi React

· 2 min read
Jacky Rusly

Pada artikel kali ini saya akan berbagi tentang Modal Konfirmasi Menggunakan Promise Pada Aplikasi React. Apakah kalian pernah terpikir bisa menggunakan async await pada modal konfirmasi? Contohnya seperti berikut ini:

const isOk = await showConfirmation('Are you sure you want to submit?');

if (isOk) {
  callApi();
}

Example

Hanya perlu dipanggil pada level js dan modal akan muncul sehingga sangat praktis dan mudah untuk menggunakan fungsi tersebut berulang-ulang.

Teknik ini juga bisa digunakan pada kasus-kasus lainnya seperti:

  • Snackbar/Toast
  • Modal peringatan

Untuk mengetahui lebih lanjut bagaimana cara membuatnya, mari baca terus ya sampai selesai dan lebih baik lagi kalau sambil dipraktikkan.

Buat Project React​

Kali ini saya akan membuat project React dengan menggunakan yarn dan vite.

yarn create vite

Setup Project

Bisa diisi sesuai dengan yang diinginkan, misalnya:

  • Name: react-confirmation-modal-promise-example.
  • Framework: React.
  • Variant: JavaScript.

Tambah Element Pada index.html​

Buka index.html dan tambah 1 div di bawah element root.

<div id="portal-confirmation"></div>

Jadinya seperti berikut:

<!DOCTYPE html>
<html lang="id">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>React Confirmation Modal Promise Example</title>
</head>

<body>
  <div id="root"></div>
  <div id="portal-confirmation"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

</html>

Buat Helper ConfirmationPromise​

Buat 3 files:

  • src/utils/ConfirmationPromise/ConfirmationPromise.css.
  • src/utils/ConfirmationPromise/ConfirmationPromise.jsx.
  • src/utils/ConfirmationPromise/index.js.
src/utils/ConfirmationPromise/ConfirmationPromise.css
.confirmation-modal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.confirmation-container {
  background-color: white;
  max-width: 500px;
  width: 100%;
  border-radius: 0.5rem;
  padding: 0.25rem 1.5rem 1.5rem 1.5rem;
  margin: 0 1rem;
}

.confirmation-action {
  text-align: right;
}

.confirmation-button-cancel {
  background-color: indianred;
}
src/utils/ConfirmationPromise/ConfirmationPromise.jsx
import ReactDOM from 'react-dom/client';
import './ConfirmationPromise.css';

const ConfirmationModal = ({ message, onResponse }) => {
  const onOk = () => {
    onResponse(true);
  };

  const onCancel = () => {
    onResponse(false);
  };

  return (
    <div className="confirmation-modal">
      <div className="confirmation-container">
        <h2>Confirmation</h2>

        <div>{message}</div>

        <br />

        <div className="confirmation-action">
          <button className="mr-2" onClick={onOk}>OK</button>
          <button
            className="confirmation-button-cancel"
            onClick={onCancel}
          >
            Cancel
          </button>
        </div>
      </div>
    </div>
  );
};

const showConfirmation = async (message) => {
  const container = document.getElementById('portal-confirmation');
  const root = ReactDOM.createRoot(container);

  return await new Promise((resolve) => {
    const onResponse = (response) => {
      root.unmount();
      resolve(response);
    };

    root.render(<ConfirmationModal message={message} onResponse={onResponse} />);
  });
};

export default showConfirmation;
src/utils/ConfirmationPromise/index.js
export { default } from './ConfirmationPromise';

Bisa dilihat pada fungsi showConfirmation, di fungsi tersebut return sebuah Promise yang akan di resolve ketika user klik tombol OK atau Cancel sehingga kita bisa melakukan await pada saat memanggil fungsi tersebut.

Ubah App.jsx​

Ubah file src/App.jsx seperti berikut:

import showConfirmation from './utils/ConfirmationPromise';

function App() {
  const submit = async () => {
    const response = await showConfirmation('Are you sure you want to submit?');

    alert(`Response: ${response}`);
  };

  return (
    <div>
      <button onClick={submit}>
        Show Confirmation
      </button>
    </div>
  )
}

export default App;

Demo​

Demo

Example

Response

Penutup​

Untuk contoh codenya bisa dilihat pada GitHub Repository React Confirmation Modal Promise Example.

Terimakasih sudah membaca artikel Modal Konfirmasi Menggunakan Promise Pada Aplikasi React. Semoga artikel ini bisa bermanfaat bagi teman-teman.