🚦 Giới thiệu react-router-prompt-plus: Cảnh báo người dùng khi rời trang có thay đổi chưa lưu

Trong quá trình phát triển các ứng dụng React, đặc biệt là các form phức tạp hay dashboard quản trị, chắc hẳn bạn từng gặp tình huống:

“Người dùng nhập thông tin xong quên bấm lưu, rồi chuyển trang — và mọi dữ liệu biến mất!”

Để giải quyết vấn đề đó, mình đã xây dựng thư viện react-router-prompt-plus — một giải pháp đơn giản nhưng hiệu quả giúp cảnh báo người dùng khi họ sắp rời khỏi trang mà có thay đổi chưa lưu.

---

🎯 Mục tiêu của thư viện

• Cảnh báo khi người dùng chuyển route trong SPA (client-side navigation).
• Hỗ trợ cảnh báo khi đóng tab (unload/reload).
• Dễ tích hợp với form hoặc state isDirty.
• Tương thích với React Router v6 trở lên.

---

💡 Cách sử dụng

Cài đặt:

bash
Copy
npm install react-router-prompt-plus

Tích hợp vào component:

typescript
Copy
import { usePrompt } from "react-router-prompt-plus"

function MyForm() {
  const [isDirty, setIsDirty] = useState(false)

  const { showPrompt, handleConfirm, handleCancel } = usePrompt({
    when: isDirty,
  })

  const onConfirm = () => {
    handleConfirm()
    setIsDirty(false)
  }

  const onCancel = () => {
    handleCancel()
  }

  return (
    <div>
      <input onChange={() => setIsDirty(true)} />
      {showPrompt && (
        <div className="modal">
          <p>Are you sure you want to leave this page?</p>
          <button onClick={onConfirm}>Yes</button>
          <button onClick={onCancel}>No</button>
        </div>
      )}
    </div>
  )
}

Bạn có thể tùy biến giao diện cảnh báo bằng cách sửa lại đoạn mã UI phía trên.

Khi isDirty là true, người dùng sẽ được cảnh báo trước khi rời khỏi trang — dù là chuyển route hay đóng trình duyệt.

---

🧠 Khi nào nên dùng react-router-prompt-plus?

• Form có nhiều trường, yêu cầu xác nhận trước khi mất dữ liệu.
• Bảng điều khiển quản trị hoặc CMS.
• Ứng dụng có tính năng tạo bài viết, chỉnh sửa hồ sơ, v.v.

---

🔍 So với các giải pháp khác

Có nhiều thư viện tương tự như react-router-prompt, nhưng react-router-prompt-plus có một số điểm nổi bật:

• Hỗ trợ tốt React Router v6.
• Dễ dàng tích hợp logic isDirty.
• Cảnh báo cả khi unload (Ctrl+W, F5, reload...).
• API đơn giản, không rườm rà.

---

📦 Kết luận

Thư viện react-router-prompt-plus được tạo ra với mục tiêu giúp developer dễ dàng bảo vệ người dùng khỏi mất dữ liệu ngoài ý muốn. Dù nhỏ gọn nhưng đây là công cụ hữu ích cho bất kỳ ứng dụng web hiện đại nào.

🔗 Xem chi tiết & cài đặt:
👉 https://www.npmjs.com/package/react-router-prompt-plus

---

Nếu bạn thấy thư viện hữu ích, hãy thử ngay, đóng góp hoặc tặng 1 ⭐️ trên GitHub nhé!