Ví dụ sử dụng các thư viện
Tổng hợp các ví dụ về React Hook Form, TanStack Query, Framer Motion, và nhiều hơn nữa
1. Zustand - State Management
Zustand State Management
PDF Store
Files: 0
Processing: No
Progress: 0%
UI Store
Theme: system
View Mode: grid
Zustand stores managing PDF files and UI state
2. React Hook Form + Zod Validation
3. TanStack Query - Data Fetching
Đang tải...
4. date-fns - Date Formatting
date-fns Examples
Format cơ bản
Ngày đầy đủ: Thứ Tư, ngày 10 tháng 12 năm 2025
Ngày ngắn: 10/12/2025
Giờ: 16:18:51
Ngày giờ: 10/12/2025 16:18
Khoảng cách thời gian
Hôm qua: 1 ngày trước
Ngày mai: 1 ngày nữa
Tuần sau: 7 ngày nữa
Format tương đối
Hôm qua: hôm qua vào lúc 16:18
Hôm nay: hôm nay vào lúc 16:18
Ngày mai: ngày mai vào lúc 16:18
Tính toán ngày
Hôm nay: 10/12/2025
Hôm qua: 09/12/2025
Ngày mai: 11/12/2025
7 ngày sau: 17/12/2025
5. TanStack Table - Data Tables
Bảng dữ liệu
ID | Tên | Tuổi | Email | Trạng thái |
|---|---|---|---|---|
| 1 | Nguyễn Văn A | 25 | a@example.com | Active |
| 2 | Trần Thị B | 30 | b@example.com | Inactive |
| 3 | Lê Văn C | 28 | c@example.com | Active |
| 4 | Phạm Thị D | 35 | d@example.com | Active |
| 5 | Hoàng Văn E | 22 | e@example.com | Inactive |
Hiển thị 1 / 1 trang
6. Framer Motion - Animations
Fade In/Out Animation
Nội dung với animation fade in/out
Hover Animation
Hover hoặc click vào đây!
List Animation
Item 1
Item 2
Item 3
Item 4