React Toastify là gì? Hướng dẫn sử dụng Toast Notification với React Toastify

Mình muốn chia sẻ với các bạn về một thư viện mà mình đã sử dụng trong các dự án React gần đây và cảm thấy rất hữu ích - đó là React Toastify. Nếu bạn đang tìm kiếm cách để hiển thị thông báo cho người dùng cách dễ dàng và hiệu quả, thì bạn nên xem qua bài viết này.

Mình sẽ giải thích cho các bạn về khái niệm, lý do cần sử dụng và hướng dẫn chi tiết cách áp dụng trong dự án React thực tế.

1. React Toastify là gì?

React Toastify là thư viện dành cho React giúp bạn tạo ra các thông báo dạng toast một cách nhanh chóng và dễ dàng. Toast là những thông báo nhỏ xuất hiện ở góc màn hình, thông báo cho người dùng về một sự kiện nào đó mà không làm gián đoạn trải nghiệm của họ.

Mình nhớ lần đầu tiên làm dự án cần hiển thị thông báo, mình đã phải tự tạo modal và quản lý trạng thái khá là phức tạp. Nhưng mọi thứ trở nên đơn giản hơn nhiều với thư viện này rồi.

Vì sao nên sử dụng React Toastify?

• Chỉ cần vài dòng code, bạn đã có thể hiển thị thông báo.
• Bạn có thể thay đổi vị trí, kiểu dáng, thời gian hiển thị và nhiều thứ khác.
• Thư viện nhẹ, không ảnh hưởng nhiều đến hiệu suất của ứng dụng.

2. Khi nào nên sử dụng toast notification?

Không phải lúc nào mình cũng nên hiển thị toast, vậy thì khi nào thì nên sử dụng?

2.1 Thông báo chung

Việc đặt các thông báo chung trong ứng dụng rất quan trọng. Điều này bao gồm việc thông báo về các sự kiện như: gửi biểu mẫu, thay đổi trạng thái, hoàn thành hành động.

Ví dụ, khi người dùng cập nhật thông tin cá nhân, một thông báo xác nhận sẽ giúp họ biết rằng hành động đã được thực hiện thành công.

2.2 Xử lý lỗi và xác thực đầu vào

Lỗi là điều thường gặp trên các website, đặc biệt khi người dùng điền vào form. Khi người dùng nhập thông tin không chính xác, không điền đủ các trường bắt buộc hoặc gặp lỗi từ API, việc hiển thị thông báo sẽ giúp họ hiểu nguyên nhân gây ra lỗi và các bước cần thực hiện để khắc phục.

2.3 Hoạt động đang chờ xử lý

Khi có một API đang xử lý như: giao dịch ngân hàng, xác minh người dùng hoặc kích hoạt tài khoản, việc thông báo cho người dùng về trạng thái đang chờ xử lý là rất quan trọng. Điều này đặc biệt hữu ích nếu quá trình có thể mất một khoảng thời gian để hoàn tất, giúp người dùng không bị nhầm lẫn hoặc lo lắng.

2.4 Thực hiện thành công

Thông báo cho người dùng về các sự kiện thành công ví dụ như: đăng nhập, đăng ký hoặc bất kỳ hoạt động CRUD nào giúp xác nhận hành động của họ. Ví dụ, sau khi người dùng tạo mới một bài viết, một thông báo "Bài viết tạo thành công!".

2.5 Cảnh báo

Để ngăn người dùng thực hiện các lỗi tiềm ẩn trên website, việc hiển thị thông báo cảnh báo là quan trọng. Bằng cách này, người dùng được hướng dẫn cách điều chỉnh hành động của họ trước khi xảy ra vấn đề. Ví dụ, cảnh báo về việc xóa dữ liệu quan trọng mà không thể khôi phục.

Một số lợi ích mà toast notification mang lại:

• Thông báo xuất hiện cách nhẹ nhàng, không làm gián đoạn luồng công việc của người dùng.
• Dễ dàng thu hút sự chú ý mà không cần phải hiển thị popup hoặc chuyển trang.
• Giúp người dùng nhận biết ngay lập tức về kết quả hành động vừa thực hiện.
• Giúp người dùng hiểu rõ hơn về cách sử dụng ứng dụng và tránh các lỗi thường gặp.

3. Hướng dẫn sử dụng react toastify trong dự án React TypeScript

Trước khi đi vào phần chính, bạn cần có một source base. Đừng quá lo lắng vì mình đã hướng dẫn các bạn tại đây.

Bây giờ, hãy cùng mình khám phá react toastify nha. Đầu tiên, bạn hãy cài đặt thư viện vào dự án React với câu lệnh

pnpm install react-toastify

Sau khi cài đặt xong, bạn cần import CSS của React Toastify vào ứng dụng của mình. Bạn có thể thêm dòng này vào file index.tsx hoặc App.tsx

import 'react-toastify/dist/ReactToastify.css';

Sau đó, bạn cần thêm <ToastContainer /> - nơi mà các thông báo sẽ được hiển thị. Cá nhân mình thường đặt nó ở cuối file App.tsx:

import React from 'react';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const App: React.FC = () => {
  return (
    <div>
      {/* Các thành phần khác */}
      <ToastContainer />
    </div>
  );
};

export default App;

Để hiển thị một thông báo, bạn chỉ cần import toast từ React Toastify và gọi phương thức tương ứng. Ví dụ:

import React from 'react';
import { toast } from 'react-toastify';

const MyComponent: React.FC = () => {
  const notify = () => {
    toast('Wow, thông báo đầu tiên của bạn!');
  };

  return (
    <button onClick={notify}>Hiển thị thông báo</button>
  );
};

export default MyComponent;

Khi bạn click vào button "Hiển thị thông báo", thông báo sẽ xuất hiện ở góc màn.

Các loại dạng thông báo có sẵn được thư viện cung cấp:

• toast.success('...'): thông báo thành công (màu xanh lá).
• toast.error('...'): thông báo lỗi (màu đỏ).
• toast.info('...'): thông báo thông tin (màu xanh dương).
• toast.warn('...'): thông báo cảnh báo (màu vàng).
• toast('...'): thông báo mặc định.

Ví dụ, bạn muốn hiển thị thông báo thành công khi người dùng đăng ký thành công:

toast.success('Đăng ký thành công!');

4. Customizing toast messages

Một trong những điểm khá thú vị là bạn hoàn toàn có thể custom lại theo mong muốn của bạn, không nhất thiết phải sử dụng mặc định.

4.1 Thay đổi vị trí hiển thị

Bạn muốn thông báo xuất hiện ở vị trí khác? Không vấn đề gì! Bạn có thể thay đổi vị trí bằng thuộc tính position của <ToastContainer />:

<ToastContainer position="bottom-left" />

Các vị trí có thể sử dụng:

• top-left
• top-right (default)
• top-center
• bottom-left
• bottom-right
• bottom-center

4.2 Tuỳ chỉnh thời gian hiển thị toast

Bạn có thể điều chỉnh thời gian thông báo tự động đóng bằng thuộc tính autoClose (tính bằng mili giây)

<ToastContainer autoClose={8000} />

Hoặc nếu bạn muốn thông báo tồn tại cho đến khi người dùng đóng:

<ToastContainer autoClose={false} />

4.3 Một vài tuỳ chỉnh khác

• hideProgressBar: ẩn thanh tiến trình.

<ToastContainer hideProgressBar={true} />

• newestOnTop: hiển thị thông báo mới nhất ở trên cùng.

<ToastContainer newestOnTop={true} />

• closeOnClick: đóng thông báo khi người dùng click vào.

<ToastContainer closeOnClick={false} />

4.4 Thêm icon vào nội dung

Bạn muốn thêm biểu tượng riêng hoặc tùy chỉnh nội dung thông báo? Dễ thôi!

toast.success('Đăng ký thành công!', {
  icon: '🚀',
});

Sử dụng các element trong toast

toast(
  <div>
    <h4>Thành công!</h4>
    <p>Bạn đã đăng ký thành công tài khoản.</p>
  </div>
);

Custom styling bằng CSS:

/* styles.css */
.my-toast {
  background-color: #4caf50;
  color: white;
}

import './styles.css';

toast.success('Đăng ký thành công!', {
  className: 'my-toast',
});

Thường thì mình sẽ sử dụng cách này để đồng bộ style riêng theo từng dự án.

Mình sẽ tổng kết lại với một ví dụ đơn giản như thế này:\

import React from 'react';
import { toast } from 'react-toastify';

const RegisterForm: React.FC = () => {
  const handleRegister = async () => {
    try {
      await fakeRegisterApi();
      toast.success('Đăng ký thành công!');
    } catch (error) {
      toast.error('Đăng ký thất bại. Vui lòng thử lại.');
    }
  };

  return (
    <button onClick={handleRegister}>Đăng ký</button>
  );
};

export default RegisterForm;

const fakeRegisterApi = (): Promise<void> => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      Math.random() > 0.5 ? resolve() : reject();
    }, 1000);
  });
};

Trong ví dụ này, khi người dùng click vào button "Đăng ký", hàm handleRegister sẽ được gọi. Nếu đăng ký thành công, hiển thị thông báo thành công. Nếu thất bại, hiển thị thông báo lỗi.

5. Kết luận

Qua bài viết này, mình hy vọng đã giúp các bạn hiểu rõ hơn về React Toastify và cách sử dụng nó trong dự án React với TypeScript. Nếu bạn chưa thử React Toastify, hãy dành chút thời gian để tích hợp và trải nghiệm trong dự án.

Các bài viết liên quan:

• Hướng dẫn sử dụng Zustand trong NextJS
• Lazy Loading: Kỹ thuật Tối ưu Hiệu suất Website
• Hướng dẫn sử dụng Redux Toolkit và Redux Saga trong dự án React
• Quản lý và Tối ưu hóa Memory trong JavaScript