Cách tạo cảnh báo tùy chỉnh trong React bằng React-Toastify
Thông báo cảnh báo thường được sử dụng trong ứng dụng web để hiển thị cảnh báo, lỗi, thông báo thành công và các thông tin có giá trị khác.
Có một số gói và khung phổ biến để tạo thông báo cảnh báo trong React. React-Toastify là thư viện React cho phép bạn thêm thông báo và thông báo cảnh báo vào ứng dụng của mình.
Mục Lục
Cài đặt React Toastify
Để cài đặt Toastify trong dự án React của bạn, hãy chạy lệnh này trong thư mục dự án của bạn:
npm install --save react-toastify
Thiết lập Toastify
Để sử dụng gói Toastify, bạn sẽ cần nhập tệp Bánh Mì NướngChứa, nướng và tệp CSS đi kèm do gói cung cấp.
Các Bánh Mì NướngChứa bên trong thành phần Ứng dụng lưu trữ tất cả thông báo bánh mì nướng được tạo.
import { ToastContainer, toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';function App() {
return(
<div>
<ToastContainer/>
</div>
);
}
Bạn có thể dùng nướng phương pháp tạo thông báo bánh mì nướng cho dự án React của bạn:
function App() {
const notify = () => toast.success("Hello There!"); return(
<div>
<button onClick={notify}>Notify</button>
<ToastContainer/>
</div>
);
}
Nhấp vào nút mà mã này tạo sẽ gọi toast.success phương pháp, chuyển nó “Xin chào!” chuỗi. Điều này sẽ tạo ra một thông báo bánh mì nướng hiển thị thông báo trên màn hình, như thế này:
Lưu ý rằng có nhiều loại phương pháp nướng khác nhau mà bạn có thể gọi, chẳng hạn như toast.info(), toast.error(), toast.success(), toast.warning(). Mỗi phương pháp này có một số kiểu màu tinh tế để phản ánh loại thông báo.
Định vị thông báo bánh mì nướng của bạn
Theo mặc định, thông báo bật lên từ phía trên bên phải màn hình của ứng dụng web. Bạn có thể thay đổi điều này bằng cách đặt thuộc tính vị trí trên Bánh Mì NướngChứa. Có sáu giá trị vị trí khả dụng: trên cùng bên phải, trên cùng ở giữa, trên cùng bên trái, dưới cùng bên phải, dưới cùng ở giữa và dưới cùng bên trái.
Ví dụ:
function App() {
const notify = () => toast.success("Hello There!"); return(
<div>
<button onClick={notify}>Notify</button>
<ToastContainer position="top-left"/>
</div>
);
}
Đặt giá đỡ vị trí trên Bánh Mì NướngChứa ở trên cùng bên trái đảm bảo rằng tất cả các thông báo bật lên từ phía trên cùng bên trái của màn hình.
Bạn có thể thay đổi vị trí mặc định cho các thông báo bánh mì nướng riêng lẻ bằng cách sử dụng giá đỡ vị trí của nướng phương pháp:
function App() {
const notify = () => toast.success("Hello There!", {position: toast.POSITION.TOP_CENTER}); return(
<div>
<button onClick={notify}>Notify</button>
<ToastContainer position="top-left"/>
</div>
);
}
Bạn cũng có thể định vị thông báo Toast bằng cách sử dụng thuộc tính vị trí CSS, nhưng chỗ dựa vị trí của Toastify là cách tiêu chuẩn để thực hiện việc này.
Xử lý AutoClose Prop của Toast Method và ToastContainer
Bạn có thể thay đổi thời gian hiển thị của thông báo bánh mì nướng. Bạn có thể kiểm soát thời gian mở thông báo bánh mì nướng bằng cách sử dụng Tự động đóng chống đỡ. Bạn có thể thay đổi thời gian trễ cho tất cả các thông báo hiển thị và thông báo hiển thị dành riêng cho từng cá nhân. Các Tự động đóng prop chỉ chấp nhận giá trị boolean sai hoặc thời lượng tính bằng mili giây.
Để thay đổi thời gian trễ cho tất cả thông báo toast, hãy sử dụng Tự động đóng chống đỡ trong Bánh Mì NướngChứa yếu tố.
Ví dụ:
function App() {
const notify = () => toast.success("Hello There!"); return(
<div>
<button onClick={notify}>Notify</button>
<ToastContainer autoClose={5000}/>
</div>
);
}
Với các cài đặt ở trên, tất cả các thông báo về bánh mì nướng sẽ hiển thị trong đúng năm giây (5.000 mili giây).
Sử dụng Tự động đóng tài sản của mỗi người nướng phương pháp, bạn có thể tùy chỉnh thời gian trễ cho từng thông báo bánh mì nướng.
Ví dụ:
function App() {
const notifyOne = () => toast.info("Will close in 10 seconds", {autoClose: 10000});
const notifyTwo = () => toast.info("Will close in 15 seconds", {autoClose: 15000}); return (
<div>
<button onClick={notifyOne}>Notify One</button>
<button onClick={notifyTwo}>Notify Two</button>
<ToastContainer />
</div>
);
}
Để ngăn thông báo toast đóng theo mặc định, bạn có thể đặt Tự động đóng chống đỡ sai. Bạn có thể đảm bảo người dùng phải đóng thủ công từng thông báo bánh mì nướng bằng cách đặt Tự động đóng chỗ dựa của Bánh Mì NướngChứa để sai.
Ví dụ:
function App() {
const notify = () => toast.info("Hello There!"); return (
<div>
<button onClick={notify}>Notify</button>
<ToastContainer autoClose={false} />
</div>
);
}
thiết lập Tự động đóng chỗ dựa của cá nhân nướng phương pháp để sai cũng sẽ đảm bảo rằng các thông báo cụ thể đó không đóng theo mặc định.
Hiển thị thông báo không theo chuỗi với Toastify
Bạn có thể hiển thị chuỗi, thành phần phản ứng và số dưới dạng tin nhắn thông báo khi làm việc với thông báo bánh mì nướng. Để hiển thị thành phần React dưới dạng thông báo bánh mì nướng, bạn tạo thành phần đó và hiển thị nó bằng cách sử dụng nướng phương pháp.
Ví dụ:
function Message({toastProps, closeToast}) {
return (
<div>
<p>Welcome {toastProps.position}</p>
<button onClick={closeToast}></button>
</div>
)
}export default Message;
Khối mã này tạo ra một thành phần, Thông điệp. Khi hiển thị một thành phần dưới dạng thông báo, bánh mì nướng sẽ thêm bánh mì nướng và đóngBánh mì nướng props cho thành phần của bạn. Các đóngBánh mì nướng prop là một chức năng mà bạn có thể sử dụng để đóng thông báo. Các bánh mì nướng prop là một đối tượng có các thuộc tính lưu trữ thông tin chi tiết về thông báo bánh mì nướng bao gồm vị trí, loại và các đặc điểm khác của nó.
Nhập thành phần Tin nhắn, sau đó chuyển nó tới hàm toast(), hiển thị nó dưới dạng thông báo bánh mì nướng:
import { ToastContainer, toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
import Message from "./components/Message";function App() {
const msg = () => toast(<Message />);
return (
<div>
<button onClick={msg}>Welcome</button>
<ToastContainer />
</div>
);
}
Nhấp vào nút sẽ hiển thị thông báo chứa câu hỏi và hai nút trên màn hình của bạn.
Thông báo bánh mì nướng tạo kiểu
Bạn không cần phải sử dụng kiểu dáng mặc định cho thông báo bánh mì nướng của mình. Bạn có thể tùy chỉnh chúng để phù hợp với chủ đề hoặc mẫu thiết kế mong muốn phù hợp với ứng dụng web của bạn.
Để tạo kiểu cho thông báo bánh mì nướng của bạn, hãy cung cấp cho nó một tên lớp và áp dụng các tùy chỉnh trong tệp CSS.
Ví dụ:
function App() {
const notify = () => toast.success("Hello There!", {className: "toast-message"}); return (
<div>
<button onClick={notify}>Notify</button>
<ToastContainer position="top-center" />
</div>
);
}
với tên lớp được đính kèm vào thông báo của bạn, bạn có thể tạo kiểu cho thông báo bánh mì nướng theo sở thích của mình bên trong tệp CSS:
.toast-message {
background-color: #000000;
color: #FFFFFF;
font-size: 20px;
padding: 1rem 0.5rem;
}
Do kiểu dáng tùy chỉnh ở trên, thông báo sẽ trông như thế này:
Toast Notifications cho ứng dụng web của bạn
Giờ đây, bạn có thể tạo cảnh báo tùy chỉnh trong React bằng gói React-Toastify và các phương thức có sẵn của nó. Bằng cách tạo kiểu cho các cảnh báo/thông báo tùy chỉnh này theo sở thích của mình, bạn có thể nâng cao trải nghiệm người dùng cho ứng dụng web của mình.
React-Toastify cung cấp một phương pháp nhanh chóng và hiệu quả để đưa các cảnh báo tùy chỉnh vào dự án React của bạn một cách dễ dàng.