1.1.48 • Published 2 years ago
form-simple-react v1.1.48
form-simple-react
Simple form in React.
Installation
yarn add form-simple-react
Usage
Example
import Form, { FormType, ISetForm, IValidators } from "form-simple-react/dist/Form/Form";
import { FC } from "react";
import "./App.css";
function App() {
const initialValueForm = {
text: "",
customText: "",
emailInput: "",
checkbox: false,
textArea: { nestedInput: "" },
};
const handleSubmit = (form: FormType<typeof initialValueForm>) => {
console.log("submit");
};
const validators: IValidators<typeof initialValueForm> = {
text: { required: "required field" },
emailInput: { invalidEmail: "invalid format email" },
// you can use the custom function for custom validations, the argument is the field value
checkbox: { custom: (value) => !value ? "value is must true" : "" },
};
// You can use totally custom components for the form
const CustomInput: FC<{setForm: ISetForm<typeof initialValueForm>, value: any}> = ({setForm, value}) => {
return <input onChange={({target: {value}}) => setForm("text", value )} value={value}></input>
}
return (
<form className="App">
<div style={{ display: "inline-flex", flexDirection: "column" }}>
{/* You can use autoScrollOnError to automatically scroll to an error in a form field */}
<Form initialValue={initialValueForm} validators={validators} autoScrollOnError={true}>
{({ Field, TextArea, setForm, form, Error, submit, errors, Label }) => {
return (
<>
<div>
<Label htmlFor="checkbox">Label for checkbox</Label>
<Field type="checkbox" name="checkbox" />
<Error name="checkbox" />
</div>
<div>
<Field name="text" className="..." style={{color: "red"}} placeholder="text field" />
{/* You can also use a custom component */}
<CustomInput setForm={setForm} value={form.text}></CustomInput>
<Error name="text" />
<Field name="emailInput" type={"text"} placeholder="email field"
></Field>
<Error name="emailInput" />
</div>
<TextArea name="textArea/nestedInput" placeholder="text-area" />
{/* Manually access a form value */}
<h1>Value email form: {form.emailInput}</h1>
{/* Manually access a error field */}
<h1>Error email form: {errors.emailInput}</h1>
{/* You can manually change a form field with the setForm function */}
<div onClick={() => setForm("checkbox", !form.checkbox)}>
change value checkbox
</div>
{/* Form Invoke the function handleSubmit only if there are no errors in the form */}
<div onClick={() => submit((form) => handleSubmit(form))}>
submit
</div>
</>
);
}}
</Form>
</div>
</form>
);
}
export default App;
1.1.48
2 years ago
1.1.47
2 years ago
1.1.46
2 years ago
1.1.45
2 years ago
1.0.44
2 years ago
1.0.43
2 years ago
1.0.42
2 years ago
1.0.41
2 years ago
1.0.40
2 years ago
1.0.39
2 years ago
1.0.38
2 years ago
1.0.37
2 years ago
1.0.36
2 years ago
1.0.35
2 years ago
1.0.34
2 years ago
1.0.33
2 years ago
1.0.32
2 years ago
1.0.31
2 years ago
1.0.30
2 years ago
1.0.29
2 years ago
1.0.28
2 years ago
1.0.27
2 years ago
1.0.26
2 years ago
1.0.25
2 years ago
1.0.24
2 years ago
1.0.23
2 years ago
1.0.22
2 years ago
1.0.20
2 years ago
1.0.19
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago