⚠️ Cảm ơn bạn đã ủng hộ tôi, thư viện này không được duy trì nữa. Vui lòng xem xét sử dụng các thư viện khác.
Hook React cho trạng thái và kiểm tra biểu mẫu, ít mã hơn và hiệu suất cao hơn.
Tính năng
- 🎣 Easy to use, React Cool Form là a set of React hooks giúp bạn đối phó với mọi loại biểu mẫu.
- 🗃 Quản lý dữ liệu biểu mẫu dynamic và complex mà không gây phiền toái.
- 🪄 Quản lý dữ liệu arrays and lists như một chuyên gia.
- 🚦 Hỗ trợ kiểm tra built-in, form-level, và field-level.
- 🚀 Hiệu suất cao, minimizes the number of re-renders dành cho bạn.
- 🧱 Tích hợp mượt mà với các trường nhập biểu mẫu HTML hiện có hoặc 3rd-party UI libraries.
- 🎛 Thiết kế siêu linh hoạt API, được xây dựng với DX and UX trong tâm trí.
- 🔩 Cung cấp các utility functions hữu ích để thúc đẩy phát triển biểu mẫu.
- 📜 Hỗ trợ TypeScript định nghĩa kiểu.
- ☁️ Tương thích với việc render phía máy chủ.
- 🦔 Thư viện nhẹ (tiny size) nhưng mạnh mẽ.
Docs
Xem tài liệu tại react-cool-form.netlify.app để biết thêm thông tin về cách sử dụng React Cool Form!
Tài liệu thường xuyên được xem:
Bắt đầu nhanh
Để sử dụng React Cool Form, bạn phải sử dụng react@16.8.0 hoặc phiên bản cao hơn, bao gồm hooks. Gói này được phân phối qua npm.
$ yarn add react-cool-form
# or
$ npm install --save react-cool-form
Đây là khái niệm cơ bản về cách nó hoạt động:
import { useForm } from "react-cool-form";
const Field = ({ label, id, error, ...rest }) => (
<div>
<label htmlFor={id}>{label}</label>
<input id={id} {...rest} />
{error && <p>{error}</p>}
</div>
);
const App = () => {
const { form, use } = useForm({
// (Strongly advise) Provide the default values
defaultValues: { username: "", email: "", password: "" },
// The event only triggered when the form is valid
onSubmit: (values) => console.log("onSubmit: ", values),
});
// We can enable the "errorWithTouched" option to filter the error of an un-blurred field
// Which helps the user focus on typing without being annoyed by the error message
const errors = use("errors", { errorWithTouched: true }); // Default is "false"
return (
<form ref={form} noValidate>
<Field
label="Username"
id="username"
name="username"
// Support built-in validation
required
error={errors.username}
/>
<Field
label="Email"
id="email"
name="email"
type="email"
required
error={errors.email}
/>
<Field
label="Password"
id="password"
name="password"
type="password"
required
minLength={8}
error={errors.password}
/>
<input type="submit" />
</form>
);
};
✨ Khá dễ đúng không? React Cool Form mạnh mẽ hơn bạn nghĩ. Hãy explore it ngay bây giờ!
Bài viết / Bài đăng trên blog
💡 Nếu bạn đã viết bài đăng trên blog hoặc bài viết về React Cool Form, vui lòng mở PR để thêm nó vào đây.
- Được nêu bật trên React Status #245.
Chi tiết tải về:
Tác giả: wellyshen
Nguồn: https://github.com/wellyshen/react-cool-form
Giấy phép: MIT license
