Skip to main content
0
Library / FrameworkReact

ทำ modal ให้สวยและง่ายดายด้วย SweetAlert2

หลังจากที่เราเคยได้แนะนำ Library ที่สามารถสร้าง modal ได้อย่างง่ายดายไปแล้วใน บทความนี้ วันนี้เราก็กลับมาอีกครั้งกับการแนะนำ Library สำหรับการสร้าง modal อีกเช่นกัน แต่ครั้งนี้ขอบอกเลยว่ามันสามารถสร้าง modal ได้อย่างสวย ง่ายดายและมีแอนิเมชันอีกด้วย ว่าแล้วเราก็ไปรู้จักกับ Library ตัวนี้กันเลยดีกว่ากับ SweetAlert2

เขียนโดย
Thanawat Udchachon
Internship @ borntoDev

SweetAlert2 คืออะไร

สำหรับเจ้า SweetAlert2 มันก็คือ Library ตัวหนึ่งสำหรับการสร้าง modal หรือ popup boxes บนเว็บไซต์ของเราได้อย่างง่ายดาย สวยงาม และปรับแต่งได้หลากหลาย

โดยหลาย ๆ คนอาจจะคุ้นเคยกับ Library ที่ชื่อว่า SweetAlert ก็อาจจะสงสัยว่ามันเป็นตัวเดียวกันหรือเกี่ยวข้องยังไงกันรึป่าว สำหรับตัว SweetAlert นั้นก็เป็น Library สำหรับสร้างตัว alert ในลักษณะเดียวกัน แต่ไม่ได้รับการอัปเดตมาเป็นเวลานาน เลยมีผู้พัฒนาคนอื่นได้พัฒนา SweetAlert2 ขึ้นมานั่นเองครับผม

 

การใช้งาน SweetAlert2

สำหรับการใช้งาน อันดับแรกเลยก็ติดตั้งเจ้าตัว SweetAlert2 ได้ตามลิงก์นี้เลยครับ https://sweetalert2.github.io/#download

ต่อมาเรามาดูโค้ดกันเลยดีกว่า โดยในที่นี้จะใช้เป็น ReactJS นะครับผม

import React from 'react';
import Swal from 'sweetalert2';

const SweetAlert2 = () => {
  return (
    <div>
    <button 
      onClick={() => Swal.fire({
                 title: 'SweetAlert2!',
                 text: 'นี่คือ SweetAlert2',
                 icon: 'success',
                 confirmButtonText: 'รับทราบ!',
               })}
    >
   กดปุ่มนี้สิ
     </button>
    </div>
  );
};

export default SweetAlert2;

สำหรับโค้ดนี้นะครับก็จะเป็นการ import ตัว SweetAlert2 เข้ามา แล้วก็สร้างปุ่ม ที่เมื่้อกดจะแสดง modal พร้อมแอนิเมชันที่มี title ว่า SweetAlert2 เนื้อความข้างในว่า นี่คือ SweetAlert2 แสดงไอค่อนติ๊กถูก และปุ่มที่เขียนว่า รับทราบ! ผลลัพธ์ก็จะได้ออกมาตามนี้ครับ

นอกจาก title เนื้อหา ไอค่อน และปุ่มที่ได้ยกตัวอย่างไป การ configuration ของ SweetAlert2 ก็ยังมีอีกมากมายเลย อย่างเช่น เราสามารถแสดงข้อความที่มีการใช้ tag ของ HTML เช่น เปลี่ยนจาก text: ‘นี่คือ SweetAlert2’ เป็น html: ‘<i>นี่คือ SweetAlert2</i>’ เท่านี้เราก็จะได้ข้อความเอียงมาแล้วครับ หรือตัวไอค่อนติ๊กถูก ในที่นี้คือ success ก็ยังมีไอค่อนแบบอื่น ๆ ให้เลือกอยู่อีก เช่น warning, error, info, และ question

หรือปุ่มที่มี Confirm, Deny และ Cancel

นี่เป็นเพียงตัวอย่างการ configure ของ SweetAlert2 เพียงเท่านั้นครับ ซึ่งก็ยังมีแบบอื่น ๆ อยู่อีกเยอะเลย ขอแนะนำให้ไปดูเพิ่มเติมสามารถดูเพิ่มเติมจากลิงก์นี้ได้เลยครับผม https://sweetalert2.github.io/#configuration

 

Wrapper สำหรับ ReactJS

สำหรับการใช้ SweetAlert2 กับ ReactJS ถ้าเราต้องการแสดงข้อความธรรมดาหรือจาก HTML tags, ไอค่อน, ปุ่ม หรือ configure อื่น ๆ ที่ SweetAlert2 มีมาให้ก็จะไม่มีปัญหาอะไรสามารถใช้งานได้อย่างสะบาย ๆ ตามตัวอย่างจากหัวข้อก่อนหน้าเลยครับ แต่ถ้าเราต้องการแสดง component นอกเหนือจากนี้ล่ะ จะทำได้ไหม เรามาดูตัวอย่างกัน

ในที่นี้นะครับ ผมจะลองแสดงไอคอน Facebook ของ material-ui ดูครับว่าจะเกิดอะไรขึ้น

import React from 'react';
import Swal from 'sweetalert2';
import FacebookIcon from '@material-ui/icons/Facebook';

const SweetAlert2 = () => {
  return (
    <div>
     <button 
       onClick={() => Swal.fire({
                  title: 'SweetAlert2!',
                  html: '<FacebookIcon fontSize="large" />',
                  icon: 'success',
                  confirmButtonText: 'รับทราบ!',
                })}
     >
    กดปุ่มนี้สิ
      </button>
     </div>
  );
};

export default SweetAlert2;

ผลลัพธ์ที่ได้ออกมา

หรือถ้าเราเอา single quote ที่ครอบ <FacebookIcon fontSize=“large” /> อยู่ออกก็จะได้ออกมาเป็นแบบนี้

จะเห็นได้ว่า SweetAlert2 ไม่ได้รองรับการใช้ component อื่นของ React นะครับ ดังนั้นวิธีการที่เราจะแสดง component อื่นได้นั้นเราต้องใช้ Wrapper สำหรับ React ครับ โดย Wrapper ที่เราจะมาแนะนำนั่นก็คือ sweetalert2-react-content ตัว Wrapper อย่างเป็นทางการของ SweetAlert2 นั่นเองครับผม ซึ่งสามารถทำการติดตั้งกันได้ที่ลิงก์นี้ได้เลยครับ https://sweetalert2.github.io/recipe-gallery/sweetalert2-react.html

เอาล่ะ เรามาดูวิธีใช้งานกันเลยดีกว่า

import React from 'react';
import Swal from 'sweetalert2';
import FacebookIcon from '@material-ui/icons/Facebook';
import withReactContent from 'sweetalert2-react-content';

const SweetAlert2 = () => {

  const MySwal = withReactContent(Swal);

  return (
    <div>
     <button 
       onClick={() => MySwal.fire({
                  title: 'SweetAlert2!',
                  html: <FacebookIcon fontSize="large" />,
                  icon: 'success',
                  confirmButtonText: 'รับทราบ!',
                })}
      >
    กดปุ่มนี้สิ
      </button>
    </div>
  );
};

export default SweetAlert2;

จากโค้ดเดิม ผมได้ import ตัว sweetalert2-react-content แล้วก็สร้างตัวแปรที่ชื่อว่า MySwal ซึ่งเป็นการ wrap ตัว SweetAlert2 แล้วเปลี่ยนการเรียกใช้งานเมื่อ onClick จาก Swal เป็น MySwal เท่านี้เราก็จะสามารถแสดง component อื่น ๆ ของ React ได้แล้วครับผม

 

สรุปสุดท้ายสิ่งที่ผู้อ่านจะได้รับ

เป็นยังไงกันบ้างครับสำหรับการสร้าง modal ด้วย SweetAlert2 เรียกได้ว่าเป็น Library ที่สามารถสร้าง modal ได้อย่างสวยงามและง่ายมาก แถมมีแอนิเมชันอีก นอกจากการสร้าง modal ตรงกลางหน้าจอแล้ว SweetAlert2 ก็ยังสามารถสร้าง popup แบบอื่น ๆ ได้อีกนะ เช่น popup ที่จะแสดงขึ้นมาขอบจอแล้วจะหายไปในเวลาที่กำหนด คล้ายกับ popup ที่แสดงขึ้นมาตอนเราแชร์โพสต์บนเฟซบุ๊ก ยังไงก็ฝากไว้นะครับสำหรับการทำ modal ในครั้งต่อไปก็อย่าลืมนึกถึง SweetAlert2 กันด้วยนะครับผม

 

อ้างอิงจาก

  1. sweetalert2, สืบค้นเมื่อ 23 กุมภาพันธ์ 2565 จาก: https://sweetalert2.github.io/
  2. sweet-alert display HTML code in text, สืบค้นเมื่อ 24 กุมภาพันธ์ 2565 จาก: https://stackoverflow.com/questions/26838965/sweet-alert-display-html-code-in-text/27842854#27842854
  3. SweetAlert2 + React example, สืบค้นเมื่อ 25 กุมภาพันธ์ 2565 จาก: https://sweetalert2.github.io/recipe-gallery/sweetalert2-react.html

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน
และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

BorntoDev

Author BorntoDev

BorntoDev Co., Ltd.

More posts by BorntoDev
Close Menu

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

    ประเภทของคุกกี้ที่มีความจำเป็นในการใช้งานเพื่อการวิเคราะห์ และ นำเสนอโปรโมชัน สินค้า รวมถึงหลักสูตรฟรี และ สิทธิพิเศษต่าง ๆ คุณสามารถเลือกปิดคุกกี้ประเภทนี้ได้โดยไม่ส่งผลต่อการทำงานหลัก เว้นแต่การนำเสนอโปรโมชันที่อาจไม่ตรงกับความต้องการ
    รายละเอียดคุกกี้

บันทึกการตั้งค่า