Formisch 反应原生
Formisch是Resact Introduct的一个基于计划的无头形式库. 它管理形态状态和验证. 它的型号安全,默认速度快,而由于其模块化设计,它的捆绑尺寸也很小. 试试看 游乐场来啊!
福尔米施也可供 角质, (中文(简体) ), 霍诺克, (中文(简体) ), 预录, (中文(简体) ), 齐克, (中文(简体) ), 反应, (中文(简体) ), 固态JS, (中文(简体) ), 丝绒 财务报告和审定财务报表 阴道。 。 。 .
要点
- 从2.5 kB开始的小捆绑大小
- 与 Valibot 基于 Schema 的验证
- 编辑器中自动补全的安全性
- 开放源码和全面测试,覆盖率为100%
- 速度快 —— 只有在必要的情况下才能重新投降
- 最小、可读和深思熟虑的API
- 支持本土
TextInput字段
示例
每个表格都从 useForm 钩. 它根据所提供的 Valibot 计划 初始化了你的表型商店 并推断出它的类型 与 DOM 框架不同, React Industrial 没有本地形式元素或提交事件, 所以没有 <Form /> 直接启动组件和提交 handleSubmit,例如从按钮的 onPress 或文本输入的 onSubmitEditing 处理者。 您可以访问一个字段的状态 useField 钩子或 <Field /> 要连接到您的组件 TextInput。 。 。 .
import { Field, handleSubmit, useForm } from '@formisch/react-native';
import { Button, Text, TextInput, View } from 'react-native';
import * as v from 'valibot';
const LoginSchema = v.object({
email: v.pipe(v.string(), v.email()),
password: v.pipe(v.string(), v.minLength(8)),
});
export default function LoginScreen() {
const loginForm = useForm({
schema: LoginSchema,
});
const submitForm = handleSubmit(loginForm, (output) => console.log(output));
return (
<View>
<Field of={loginForm} path={['email']}>
{(field) => (
<View>
<TextInput
{...field.props}
value={field.input}
autoCapitalize="none"
keyboardType="email-address"
/>
{field.errors && <Text>{field.errors[0]}</Text>}
</View>
)}
</Field>
<Field of={loginForm} path={['password']}>
{(field) => (
<View>
<TextInput {...field.props} value={field.input} secureTextEntry />
{field.errors && <Text>{field.errors[0]}</Text>}
</View>
)}
</Field>
<Button title="Login" onPress={submitForm} />
</View>
);
}
此外,Formisch还提供了几种功能(我们称之为"方法"),可用于读取和操纵形式状态. 其中包括: focus, (中文(简体) ), getDeepErrorEntries, (中文(简体) ), getDeepErrors, (中文(简体) ), getDirtyInput, (中文(简体) ), getDirtyPaths, (中文(简体) ), getErrors, (中文(简体) ), getInput, (中文(简体) ), handleSubmit, (中文(简体) ), insert, (中文(简体) ), isDirty, (中文(简体) ), isEdited, (中文(简体) ), isTouched, (中文(简体) ), isValid, (中文(简体) ), move, (中文(简体) ), pickDirty, (中文(简体) ), remove, (中文(简体) ), replace, (中文(简体) ), reset, (中文(简体) ), setErrors, (中文(简体) ), setInput, (中文(简体) ), swap 财务报告和审定财务报表 validate。这些方法允许您在程序上控制表格.
比较
使得福米斯奇独有的是其框架-不可知性核心,它与你所使用的框架完全本土. 它通过在核心软件包构建时插入框架特定的反应块来工作,为任何UI更新赋予你本土性能. 模块化方法 API 仅通过包含您导入的方法来保持从 ~2.5 kB 开始的捆绑,端到端类型安全覆盖了深层嵌入路径和字段阵列,其TypeScript 推论即使在形式增长时也保持了快.
对于一个侧面查看 Formisch 如何比对反应钩形和TanStack形,参见 比较指南。 。 。 .
愿景
我对Formisch的愿景是建立一个框架不可知的平台,类似于 维特但是对于形式来说——一个共享的核心,让同样的精神模型和代码基础在本土工作,跨越每一个现代UI框架.
合作伙伴
感谢我们的伙伴们支持发展! 加入他们 并促进开源软件的可持续性!
反馈
找到一个错误或有一个想法 如何改进库? 请填写一个 问题我们一起可以让表格变得更好!
许可证
这个项目是免费提供的,并获得许可证 麻省理工学院许可证。 。 。 .