Cara Menggunakan SweetAlert2 Pada React Js

Hapid Fadli    September 09, 2020    Comment   

Pada artikel kali ini saya akan memberi panduan bagaimana cara menggunakan  sweetalert2 pada react js. SweetAlert sendiri digunakan untuk mempercantik tampilan alert, jika kita hanya menggunakan alert biasa pada javascript tampilanya sederhana dan klasik, nah untuk mempercantik nya agar kelihatan bagus kita bisa menggunakan sweetalert ini. Lalu bagaimana cara menggunakan sweetalert2 ? Berikut cara menggunakan sweetalert pada react js:

Membuat Project React Js

Untuk membuat proyek react js baru, gunakan terminal dan ketikan perintah berikut:

npx create-reactp-reduxapp

Buka proyek ini menggunakan text editor visual studio code kamudian install boostrap menggunakan perintah berikut:

npm install bootstrap --save

Sekarang, buka file index.js dan tambahkan import Bootstrap.

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

Menginstall SweetAlert2

Sekarang instal sweetalert2 dengan menggunakan perintah berikut.

npm install --save sweetalert2 sweetalert2-react-content

Sekarang masuk ke folder src dan tambahkan komponen baru.

• Sweetalertdemo.js

Sekarang, buka file Sweetalertdemo.js dan tambahkan kode berikut.

import React, { Component } from "react";  
import Swal from "sweetalert2";  
  
export default class Sweetalertdemo extends Component {  
  
  constructor() {  
    super();  
    this.HandleClick = this.HandleClick.bind(this);  
  }  
  
  HandleClick() {  
    Swal.fire({  
      title: 'Success',  
      type: 'success',  
      text: 'Your work has been saved.',  
    });  
  }  
  HandleClick1() {  
    Swal.fire({  
      title: 'Are you sure?',  
      text: 'User will have Admin Privileges',  
      icon: 'warning',  
      showCancelButton: true,  
      confirmButtonColor: '#3085d6',  
      cancelButtonColor: '#d33',  
      confirmButtonText: 'Yes!'  
    });  
  }  
  HandleClick12() {  
    Swal.fire({  
      icon: 'error',  
      title: 'Oops...',  
      text: 'Something went wrong!',  
      footer: 'Why do I have this issue?'  
    });  
  }  
  HandleClicktop() {  
    Swal.fire({  
      position: 'top-end',  
      icon: 'success',  
      title: 'Your work has been saved',  
      showConfirmButton: false,  
      timer: 1500  
    });  
  }  
  HandleClickAutoclose() {  
    let timerInterval  
    Swal.fire({  
      title: 'Auto close alert!',  
      html: 'I will close in  milliseconds.',  
      timer: 1000,  
      timerProgressBar: true,  
      onBeforeOpen: () => {  
        Swal.showLoading()  
        timerInterval = setInterval(() => {  
          const content = Swal.getContent()  
          if (content) {  
            const b = content.querySelector('b')  
            if (b) {  
              b.textContent = Swal.getTimerLeft()  
            }  
          }  
        }, 100)  
      },  
      onClose: () => {  
        clearInterval(timerInterval)  
      }  
    }).then((result) => {  
      if (result.dismiss === Swal.DismissReason.timer) {  
        console.log('I was closed by the timer')  
      }  
    })  
  }  
  
  
  render() {  
    return (  
      <div>  
        <div class="row" className="hdr">  
          <div class="col-sm-12 btn btn-info">  
            SweetAlert2 In React  
  
                         </div>  
        </div>  
        <div style={{ "paddingTop": "10px" }}>  
          <button class="btn btn-info btn" onClick={this.HandleClick}>Success</button>  
          <button class="btn btn-success btn" onClick={this.HandleClick1}>Confirm</button>  
          <button class="btn btn-primary btn" onClick={this.HandleClick12}>Confirm Box</button>  
          <button class="btn btn-primary btn" onClick={this.HandleClicktop}>Top Side</button>  
          <button class="btn btn-primary btn" onClick={this.HandleClickAutoclose}>Auto Close</button>  
  
        </div>  
      </div>
    );  
  }  
}

Buka file app.css, tambahkan css berikut. 

.btn  
{margin-right: 10px;margin-left: 10px} 

Buka file App.js dan tambahkan kode berikut. 

import React from 'react';  
import './App.css';  
import Sweetalertdemo from './Sweetalertdemo'  
function App() {  
  return (  
    <div className="App">  
      <Sweetalertdemo/>  
    </div>
  );  
}  
  
export default App;

Sekarang, jalankan proyek dengan menggunakan perintah 'npm start' dan periksa hasilnya.