react-simplepostform v0.0.2
REACT SimplePostFormular
SimplePostFormular is a easy and lightweight library to validate user data in realtime with npm Joi in REACT.
Installing and dependencies
You can install SimplePostFormular with
npm i react-simplepostformular
react-simplepostformular only runs with npm Joi. For more information see: https://www.npmjs.com/package/joi
You can install npm Joi with npm i joi
Example
function App() {
const schema = Joi.object({
username: Joi.string().min(3).max(8).required(),
password: Joi.string().min(2).max(3).required(),
mail: Joi.string().min(2).max(3).required()
});
const formObject = {
username: "",
password: "",
mail: ""
}
return (
<>
<SimplePostForm schema={schema} formObject={formObject}>
<TextInput name="username" />
<TextInput name="password" />
<TextInput name="mail" />
</SimplePostForm>
</>
);
}
Using
Build Schema
First you need to build the Schema for your validation. Create a Joi Object for your input rules. If you need more information about npm Joi you need to read the Joi documentation.
Afer this you need to build up a object with all input fields that needs to be validated through Joi.
const formObject = {
username: "",
password: "",
mail: ""
}
Make sure that your object key names are equal to the Joi Schema key names.
Build Formular
Import and use the SimplePostForm tag and inject it with your Joi Schema and the Input Object like here
<SimplePostForm schema={schema} formObject={formObject}></SimplePostForm>
Use the SimplePostFormular TextInput Tag. Give them a name propertie to create a label and a REACT list key.
return (
<>
<SimplePostForm schema={schema} formObject={formObject}>
<TextInput name="username" />
<TextInput name="password" />
<TextInput name="mail" />
</SimplePostForm>
</>
);