Cách tạo thành phần thông báo tùy chỉnh trong React bằng SweetAlert

SweetAlert là một thư viện phổ biến cung cấp cho bạn khả năng tạo các thành phần thông báo tùy chỉnh cho ứng dụng React của bạn. Bạn có thể sử dụng thông báo để thông báo cho người dùng về thông tin quan trọng, lỗi hoặc hành động thành công trong ứng dụng của bạn. Điều này làm tăng thêm trải nghiệm người dùng tuyệt vời.

Cài đặt thư viện SweetAlert

Để sử dụng thư viện SweetAlert để tạo thông báo, bạn cần cài đặt nó bằng bất kỳ trình quản lý gói nào bạn chọn.

Bạn có thể cài đặt nó thông qua trình quản lý gói NPM bằng cách chạy lệnh sau trong thiết bị đầu cuối của mình:

 npm install sweetalert --save
 

Sử dụng SweetAlert để tạo thông báo

Tạo thông báo tùy chỉnh trong ứng dụng React của bạn bằng thư viện SweetAlert cũng tương tự như sử dụng thư viện Toastify. Các bơi lội chức năng do thư viện SweetAlert cung cấp sẽ tạo một phiên bản của thành phần thông báo và xác định các thuộc tính của thông báo.

Đây là một ví dụ về việc sử dụng bơi lội() Chức năng tạo thành phần thông báo:

 import React from 'react'
import swal from 'sweetalert'
function App() {
  const notify = () => swal('Hello There');
  return (
    <div>
      <button onClick={notify}>Click Me</button>
    </div>
  )
}
export default App
 

Nhấp vào nút sẽ gọi bơi lội sẽ hiển thị thông báo với thông báo “Xin chào”.

Các bơi lội hàm nhận ba tham số. Tham số đầu tiên là tiêu đề của thông báo, tham số thứ hai là thông báo và tham số thứ ba là biểu tượng sẽ hiển thị trong thông báo của bạn.

Bạn có thể đặt biểu tượng tham số thành một trong các giá trị được xác định trước, tức là, thành công, cảnh báo, lỗihoặc thông tin. Thông báo sau đó sẽ dựa trên các giá trị bạn đã chuyển.

Ví dụ:

 import React from 'react'
import swal from 'sweetalert'
function App() {
  const notify = () => swal('Hello There', 'Welcome to my Page', 'success');
  return (
    <div>
      <button onClick={notify}>Click Me</button>
    </div>
  )
}
export default App
 

Khi người dùng nhấp vào nút, nó sẽ gọi thông báo chức năng. Sau đó, chức năng này sẽ hiển thị thông báo với nội dung “Xin chào” và “Chào mừng bạn đến với Trang của tôi” cùng với biểu tượng thành công.

Một thay thế cho việc sử dụng bơi lội chức năng với ba tham số sẽ được sử dụng bơi lội chức năng với tham số đối tượng. Tham số đối tượng này chứa các thuộc tính xác định thành phần thông báo.

Ví dụ:

 import React from 'react'
import swal from 'sweetalert'
function App() {
  const notify = () => swal(
    {
      title: 'Hello There',
      text: 'Welcome to my Page',
      icon: 'success',
      button: 'OK',
    }
  );
  return (
    <div>
      <button onClick={notify}>Click Me</button>
    </div>
  )
}
export default App
 

Trong khối mã ở trên, bơi lội hàm lấy một đối tượng với các thuộc tính sau: tiêu đề, chữ, biểu tượngVà cái nút.

Các tiêu đề thuộc tính chỉ định tiêu đề của thông báo, trong khi thuộc tính chữ thuộc tính xác định thông điệp. với biểu tượng thuộc tính, bạn có thể chỉ định loại biểu tượng được hiển thị trong thông báo.

Cuối cùng, cái nút thuộc tính chỉ định văn bản của nút được hiển thị trong thông báo. Trong trường hợp này, nút hiển thị văn bản ĐƯỢC RỒI.

Tùy chỉnh thuộc tính nút

Bạn có thể tùy chỉnh các cái nút thuộc tính của thành phần thông báo để phù hợp với nhu cầu thiết kế của bạn. Các cái nút thuộc tính lấy một đối tượng có các thuộc tính được sử dụng để định cấu hình hành vi và giao diện của nút.

Một nút mặc định chứa các thuộc tính sau:

 swal(
    {
    button: {
       text: "OK",
       value: true,
       visible: true,
       className: "",
       closeModal: true
    },
    }
  );
 

Trong khối mã ở trên, các thuộc tính sau được sử dụng với nút:

• chữ: Văn bản sẽ hiển thị trên nút.
• giá trị: Giá trị trả về khi người dùng nhấp vào nút. Trong trường hợp này, giá trị là ĐÚNG VẬY.
• dễ thấy: Giá trị boolean cho biết liệu nút có hiển thị hay không.
• tên lớp: Một chuỗi đại diện cho lớp CSS để áp dụng cho nút.
• closeModal: Một giá trị boolean cho biết có nên đóng chế độ khi nút được bấm hay không.

Bạn cũng có thể kết xuất nhiều nút bằng cách sử dụng một mảng với nút tài sản. Mảng sẽ lấy các chuỗi làm phần tử của nó.

Ví dụ:

 swal(
    {
     buttons: ["Cancel", "Ok"],
    }
  );
 

Trong ví dụ này, thành phần thông báo của bạn sẽ chứa hai nút có nội dung ‘ Hủy bỏ Và Được rồi. thiết lập nút tài sản để SAI sẽ hiển thị thông báo không có nút.

Kết xuất các phần tử HTML bên trong thành phần thông báo

Bạn cũng có thể hiển thị các phần tử HTML ngoài các chuỗi đơn giản dưới dạng thông báo. Điều này cung cấp một loạt các tùy chọn tùy chỉnh.

Ví dụ:

 import React from 'react'
import swal from 'sweetalert'
function App() {
  const notify = () => swal(
    {
      content: {
        element: 'input',
        attributes: {
          placeholder: 'First Name',
          type: 'text'
        }
      },
      buttons: 'Sign Up'
    }
  )
  return (
    <div className="app">
      <button onClick={notify}>Click Me</button>
    </div>
  )
}
export default App
 

Trong ví dụ này, bạn sử dụng nội dung để hiển thị trường đầu vào với văn bản giữ chỗ.

Bạn chỉ định nội dung của thông báo bằng cách sử dụng nội dung thuộc tính và phần tử HTML để kết xuất với yếu tố tài sản. Để chỉ định các thuộc tính của phần tử HTML, bạn sử dụng thuộc tính tài sản.

Khối mã ở trên sẽ hiển thị thông báo bên dưới khi bạn nhấp vào phần tử nút.

Tạo kiểu cho Thành phần Thông báo

Thay vì tuân theo kiểu hộp thông báo mặc định do thư viện SweetAlert cung cấp, bạn có thể tùy chỉnh giao diện của hộp thông báo bằng cách áp dụng các kiểu CSS của riêng bạn.

Bạn sẽ sử dụng tên lớp thuộc tính để thêm kiểu của bạn vào thông báo. Các tên lớp thuộc tính định nghĩa một lớp CSS cho thông báo.

Ví dụ:

 swal(
    {
      title: 'Hello There',
      text: 'Welcome to my Page',
      button: false,
      className: 'alert',
    }
  )
 

Thông báo trong khối mã trên có một tên lớp giá trị báo động. Sau khi tạo thông báo và xác định tên lớpbạn sẽ xác định các kiểu CSS của mình:

 .alert{
  background-color: green;
  font-family: cursive;
  border-radius: 15px;
}
 

Các kiểu CSS ở trên sẽ áp dụng cho thông báo khi kết xuất:

Đóng Thành phần Thông báo

Thư viện SweetAlert cung cấp một số tùy chọn để tùy chỉnh cách đóng thông báo của bạn. Các tùy chọn này là closeOnEsc, closeOnClickOutsideVà hẹn giờ của cải.

Các closeOnEsc thuộc tính xác định xem hộp thông báo có đóng khi người dùng nhấn phím Esc trên bàn phím của họ hay không. Các closeOnEsc thuộc tính nhận một giá trị boolean.

 swal(
    {
      ...,
      closeOnEsc: false,
    }
  )
 

Theo mặc định, các closeOnEsc thuộc tính được đặt thành ĐÚNG VẬY. Trong khối mã ở trên, bạn đang đặt closeOnEsc tài sản để SAI. Bằng cách đặt thuộc tính thành SAIngười dùng không thể đóng hộp thông báo bằng cách nhấn phím Esc.

Bạn cũng có thể xác định xem người dùng có thể đóng hộp thông báo hay không bằng cách nhấp vào bên ngoài hộp bằng cách sử dụng closeOnClickOutside tài sản.

Nếu thuộc tính được đặt thành ĐÚNG VẬYcác closeOnClickOutside thuộc tính cho phép đóng hộp thông báo bằng cách nhấp vào bất kỳ đâu bên ngoài hộp thông báo. Đây là hành vi mặc định của SweetAlert. Để dừng hành vi này, hãy đặt closeOnClickOutside tài sản để SAI.

 swal(
    {
      ...,
      closeOnClickOutside: false,
    }
  )
 

với hẹn giờ thuộc tính, bạn có thể đặt giới hạn thời gian để hộp thông báo tự động đóng. Các hẹn giờ thuộc tính nhận một giá trị số nguyên tính bằng mili giây.

 swal(
    {
      ...,
      timer: 5000,
    }
  )
 

Trong ví dụ này, các hẹn giờ thuộc tính được đặt thành 5000. Thông báo sẽ chỉ hiển thị trong 5 giây.

Thông báo tùy chỉnh hiệu quả bằng SweetAlert

SweetAlert là một thư viện mạnh mẽ mà bạn có thể tạo các thông báo tùy chỉnh trong ứng dụng React. Sử dụng của thư viện bơi lội chức năng, giờ đây bạn có thể tạo thông báo với các thuộc tính và hành vi tùy chỉnh. Bạn cũng có thể sử dụng các thư viện khác như React-Toastify để tạo cảnh báo tùy chỉnh trong ứng dụng React.