1.0.0-alpha.21 • Published 2 years ago
@formfield/react v1.0.0-alpha.21
React-form-field
A form state management library with component based and declarative error validation.
Install
npm install @formfield/react
Quick Start
import { Form, FormField,FormRules } from "@formfield/react";
export default function App() {
const onSubmit = (data) => {
console.log(data)
};
return (
<div className="App">
<Form
onSubmit={onSubmit}
initialValues={{
email: "",
password: "",
confirmPassword: "",
profilePictire: []}}
>
<FormField
name="email"
rules={[
FormRules.required("Email is required"),
FormRules.email("Enter a correct email")
]}
>
{({ fieldErrors,getFieldProps}) => (
<label>
Email:
<input
{...getFieldProps()}
type="email"
/>
<p>{fieldErrors}</p>
</label>
)}
</FormField>
<FormField
name="password"
rules={[
FormRules.required("Password is required"),
FormRules.password("Password shoudl at least have six characters and one uppercase character")
]}
>
{({ getFieldProps,fieldErrors }) => (
<label>
Password:
<input
{...getFieldProps()}
type="password"
/>
<p>{fieldErrors}</p>
</label>
)}
</FormField>
<FormField
name="confirmPassword"
rules={[
FormRules.required("Confirm password is required"),
FormRules.password("Password should at least have six characters and one uppercase character")
FormRules.sameAs("password", "Confirm password should match")
]}
>
{({ getFieldProps,fieldErrors}) => (
<label>
Confirm Password:
<input
type="password"
{ ...getFieldProps()}
/>
<p>{fieldErrors}</p>
</label>
)}
</FormField>
<FormField
name="profilePicture"
rules={[
FormRules.required("Profile picture is required"),
FormRules.imageMimeTypes(["jpg", "jpeg"],"Only jpg and jpeg images are allowed")
]}
>
{({ fieldHandler,fieldErrors,fieldName }) => (
<label>
Profile Picture:
<input
onChange={fieldHandler}
type="file"
name={fieldName}
/>
<p>{fieldErrors}</p>
</label>
)}
</FormField>
<button type="submit">
Sign Up
</button>
</Form>
</div>
}
1.0.0-alpha.19
2 years ago
1.0.0-alpha.16
2 years ago
1.0.0-alpha.15
2 years ago
1.0.0-alpha.18
2 years ago
1.0.0-alpha.17
2 years ago
1.0.0-alpha.21
2 years ago
1.0.0-alpha.20
2 years ago
1.0.0-alpha.14
2 years ago
1.0.0-alpha.9
2 years ago
1.0.0-alpha.8
2 years ago
1.0.0-alpha.7
2 years ago
1.0.0-alpha.6
2 years ago
1.0.0-alpha.10
2 years ago
1.0.0-alpha.5
2 years ago
0.0.1-alpha.4
3 years ago
1.0.0-alpha.4
2 years ago
1.0.0-alpha.3
2 years ago
1.0.0-alpha.2
2 years ago
0.0.1-alpha.3
3 years ago
1.0.0-alpha.1
2 years ago
1.0.0-alpha.12
2 years ago
1.0.0-alpha.11
2 years ago
1.0.0-alpha.13
2 years ago
0.0.1-alpha.2
3 years ago
0.0.1-alpha.1
3 years ago