estmarajs v0.9.0

Estmarajs

EstmaraJs is a React library which makes forms validation so easy!

Installing

Using npm:

$ npm install estmarajs

Using yarn:

$ yarn add estmarajs

Example

You will learn the basic of the library through the following example.

import React from 'react';
import { useForm, Feild, EstmaraContext as Form } from 'estmarajs';
function App() {
    const [mySweetForm, contextData] = useForm({
        username: {
            type: 'input',
            between: [3, 16],
            message: "Username feild's must be between 3 and 16 characters"
        },
        password: ''
    });
    const onSubmit = () => {
        const errors = handleSubmit(contextData);
    };
    return (
        <Form state={contextData}>
            <Feild model="username">
                <input type="text" />
            </Feild>
            {mySweetForm.errors.username ? mySweet.errors.username.message : ''}

            <Feild model="password">
                <input type="password" />
            </Feild>
            {mySweetForm.errors.password ? mySweet.errors.password.message : ''}

            <button onClick={onSubmit}></button>
        </Form>
    );
}

First you need to wrap all of your form component into a component called EstmaraContext then pass the contextData which is returned from useFrom to a property called state

So as you can see in the object within useForm, the property name is the model which you're gonna provide to a field later and the value can be either object or string, if it's an object that means you intend to validate this feild if not it'll behave as a regular input

but what does useForm return anyway, well in our example it'll return two object, you just need to focus on the first one.

let's break it down!

{
    watch: {},
    touched: {},
    errors: {}
}

Let's explore this object.

watch has the exact value of each input with its model name as a property name

{
    watch: {name: ''},
    touched: {},
    errors: {}
}

touched tells you whether a certain input was touched or not, it can be either true or false

{
    watch: {name: ''},
    touched: {name: true},
    errors: {}
}

errors tells you why the input is invalid, the types property is an array includes the reasons because of which the input is invalid

{
    watch: {name: ''},
    touched: {name: true},
    errors: {types: ['between'], message: 'Username feild\'s must be between 3 and 16 characters'}
}

finally, the handleSubmit function, you just pass the contextData and it'll return the errors object and the form will re-render as well

Now look at the table below to know which validation we provide