🦞 modali
Một thư viện hộp thoại modal đáng yêu cho React, được xây dựng từ đầu để hỗ trợ React Hooks. Modali cung cấp một giao diện đơn giản để xây dựng các cửa sổ modal đẹp trong vài phút.
Bạn có thể tìm thấy hướng dẫn đầy đủ tại Modal Components in React Using Custom Hooks trên https://upmostly.com
Cài Đặt
Cài đặt Modali trong dự án của bạn bằng npm:
npm install --save modali
⚠️ Modali sử dụng React Hooks, vì vậy bạn cần sử dụng React phiên bản 16.8 trở lên khi sử dụng Modali.
Sử Dụng
Nhập Modali
component và useModali
Hook trong các thành phần React của bạn, như sau:
import Modali, { useModali } from 'modali';
Sau khi bạn đã nhập thành phần Modali và Hook useModali, bạn đã sẵn sàng bắt đầu sử dụng Modali trong các thành phần của bạn! 🎉
Cửa Sổ Modal Cơ Bản
import React from 'react';
import Modali, { useModali } from 'modali';
const App = () => {
const [exampleModal, toggleExampleModal] = useModali();
return (
<div className="app">
<button onClick={toggleExampleModal}>
Click me to open the modal
</button>
<Modali.Modal {...exampleModal}>
Hi, I'm a Modali!
</Modali.Modal>
</div>
);
};
export default App;
Tiêu Đề, Thông Báo, và Các Nút
Modali cung cấp mọi thứ bạn cần để xây dựng các cửa sổ modal đẹp trong vài phút. Sử dụng các thuộc tính title, message và buttons để tùy chỉnh cửa sổ modal của bạn nhanh chóng như chớp mắt! ⚡️
import React from 'react';
import Modali, { useModali } from 'modali';
const App = () => {
const [completeExample, toggleCompleteModal] = useModali({
animated: true,
title: 'Are you sure?',
message: 'Deleting this user will be permanent.',
buttons: [
<Modali.Button
label="Cancel"
isStyleCancel
onClick={() => toggleCompleteModal()}
/>,
<Modali.Button
label="Delete"
isStyleDestructive
onClick={() => deleteUserWithId('123')}
/>,
],
});
return (
<div className="app">
<button onClick={toggleCompleteModal}>
Click me to open the modal
</button>
<Modali.Modal {...completeExample} />
</div>
);
};
export default App;
Hook useModali
Giống như Hook useState, Hook useModali
trả về hai giá trị có thể đặt tên bất kỳ:
- Một đối tượng chứa các props phải được truyền vào thành phần Modali.
- Một hàm để bật/tắt thành phần Modali.
Điều này được minh họa trong ví dụ trên, từ dòng sau:
const [exampleModal, toggleExampleModal] = useModali();
exampleModal
là đối tượng props. Một lần nữa, điều này phải được truyền vào thành phần Modali.toggleExampleModal
là hàm để hiển thị/ẩn Modali.
Thành Phần
Thành phần <Modali.Modal />
cung cấp một hộp thoại modal đẹp, tuân thủ WAI-ARIA mặc định. Nhúng nó, thêm vào cây thành phần của bạn, truyền đối tượng props bạn nhận được từ useModali Hook và bạn đã sẵn sàng.
...
const [exampleModal, toggleExampleModal] = useModali();
return (
<Modali.Modal {...exampleModal}>
Hi, I'm a Modali
</Modali.Modal>
);
...
Thành phần <Modali.Button />
Thành phần <Modali.Button />
cung cấp một thành phần nút sẵn sàng bao gồm ba kiểu nút riêng biệt: mặc định, hủy bỏ và phá hủy.
...
const [completeExample, toggleCompleteModal] = useModali({
buttons: [
<Modali.Button
label="Done"
isStyleDefault
onClick={() => handleDoneClicked()}
/>,
<Modali.Button
label="Cancel"
isStyleCancel
onClick={() => toggleCompleteModal()}
/>,
<Modali.Button
label="Delete"
isStyleDestructive
onClick={() => deleteUserWithId('123')}
/>,
],
});
return (
<Modali.Modal {...exampleModal}>
Hi, I'm a Modali
</Modali.Modal>
);
...
Các Props của <Modali.Button/>
Prop | Mô tả |
---|---|
label |
Chuỗi được hiển thị trên nút |
isStyleDefault |
Truyền prop này là true để hiển thị nút mặc định |
isStyleCancel |
Truyền prop này là true để hiển thị nút hủy bỏ |
isStyleDestructive |
Truyền prop này là true để hiển thị nút xóa |
onClick |
Gọi khi nút được nhấp |
Ví dụ khác
Nhiều Hộp thoại Modal
Sự linh hoạt này cho phép chúng ta đặt tên cho đối tượng props và hàm chuyển đổi cho phép chúng ta sử dụng nhiều Modalis trong cùng một thành phần:
import React from 'react';
import Modali, { useModali } from 'modali';
const App = () => {
const [firstModal, toggleFirstModal] = useModali();
const [secondModal, toggleSecondModal] = useModali();
return (
<div className="app">
<button onClick={toggleFirstModal}>
Click me to open the first modal!
</button>
<button onClick={toggleSecondModal}>
Click me to open the second modal!
</button>
<Modali.Modal {...firstModal}>
Hi, I'm the first Modali
</Modali.Modal>
<Modali.Modal {...secondModal}>
And I'm the second Modali
</Modali.Modal>
</div>
);
};
export default App;
Tùy chọn Modali
Modali cung cấp một giao diện sử dụng dễ dàng để truy cập các sự kiện hữu ích, như khi modal hiển thị và ẩn đi.
Sự kiện
Sự kiện | Mô tả |
---|---|
onShow |
Gọi khi thành phần hoàn thành việc gắn vào DOM |
onHide |
Gọi khi thành phần bị loại bỏ khỏi DOM |
onEscapeKeyDown |
Gọi khi phím Escape được nhấn khi thành phần được gắn vào DOM |
onOverlayClicked |
Gọi khi nền modal bị nhấp khi thành phần được gắn vào DOM |
Ví dụ
const [exampleModal, toggleExampleModal] = useModali({
onShow: () => console.log('Modali is shown'),
onHide: () => console.log('Modali is hidden')
});
Modali có thể dễ dàng tùy chỉnh bằng cách truyền vào một đối tượng các cặp khóa/giá trị cho khởi tạo của useModali Hook:
Props
Tùy chọn | Giá trị Mặc định | Mô tả |
---|---|---|
title |
chuỗi | Văn bản hiển thị ở góc trái trên cùng |
message |
chuỗi | Văn bản hiển thị trong phần thân của modal |
buttons |
mảng | Hiển thị bất kỳ thứ gì được truyền vào ở chân trang |
closeButton |
true | Kiểm soát tính hiển thị của nút đóng |
animated |
false | Làm mờ modal khi nó gắn vào DOM |
centered |
false | Đặt modal ở giữa màn hình |
large |
false | Thay đổi kích thước của modal thành 800px |
overlayClose |
true | Vô hiệu hóa việc nhấp vào lớp modal để ẩn nó |
keyboardClose |
true | Vô hiệu hóa phím ESC để ẩn modal |
Ví dụ
const [exampleModal, toggleExampleModal] = useModali({
animated: true,
large: true,
closeButton: false,
});
Tất nhiên, bạn có thể kết hợp props và sự kiện khi truyền các tùy chọn vào useModali Hook:
function handleModalOnHide() {
// do something when the modal hides
}
const [exampleModal, toggleExampleModal] = useModali({
onHide: handleModalOnHide,
large: true,
closeButton: false,
});
Demo Trực tiếp
https://upmostly.github.io/modali/
Chi tiết Tải về:
Tác giả: upmostly
Nguồn: https://github.com/upmostly/modali