react-formr

Centralised Solution for managing values, validations & input focusing in react native.

Features

1. Form validation on given rules (regex) or predefined types(email, phone, etc).
2. Input binder function includes almost everything TextInput required to handle form.
3. Auto focus next available input on submit press, triggering onFinishFocus on last input submit.
4. Input blur validation & validate on change of invalid input.
5. Listen to live changes in form using onChange props.

Detailed blog post Easy React Native Form management with react-formr

Installation

Yarn

yarn add react-formr

NPM

npm i --save react-formr

Example Usage

Import

import Formr to use with Formr wrapping component OR import {useFormr} to use Formr Hook.

import Formr, { useFormr } from 'react-formr';

Using useFormr Hook.

export const App = () => {
    const {
        onChangeHandler,
        onBlurHandler,
        onSubmitEditingHandler,
        onSubmitHandler,
        inputBinder,
        refsHandler,
        values,
        touched,
        valid
    } = useFormr({
        formFields: { email: '', phone: '' },
        validation: {
            email: { required: true, type: 'email' },
            phone: { type: 'phone' }
        }
    });
    return (
        <View>
            <TextInput
                style={{
                    borderBottomColor: 'black',
                    borderWidth: 1,
                    width: '100%'
                }}
                onChangeText={(e) => onChangeHandler('email', e)}
                onBlur={() => onBlurHandler('email')}
                value={values.email}
                ref={(ref) => refsHandler('password', ref)}
            />
            {touched.email && !valid.email && <Text>Not valid</Text>}
            {/* Using input binder, No need to take any other function than inputBinder from formr to work with input*/}
            <TextInput
                style={{
                    borderBottomColor: 'black',
                    borderWidth: 1,
                    width: '100%'
                }}
                {...inputBinder('phone')}
            />
            {touched.phone && !valid.phone && <Text>Not valid</Text>}
            <Button
                onPress={() => onSubmitHandler(console.log)}
                title="Submit"
                color="#841584"
            />
        </View>
    );
};

Using Formr wrapping component.

export const App = () => {
    return (
        <View>
            <Formr
                formFields={{ email: '', phone: '' }}
                validation={{
                    email: { required: true, type: 'email' },
                    phone: { type: 'phone' }
                }}
            >
                {({
                    onChangeHandler,
                    onBlurHandler,
                    onSubmitEditingHandler,
                    onSubmitHandler,
                    inputBinder,
                    refsHandler,
                    values,
                    touched,
                    valid
                }) => {
                    <>
                        <TextInput
                            style={{
                                borderBottomColor: 'black',
                                borderWidth: 1,
                                width: '100%'
                            }}
                            onChangeText={(e) => onChangeHandler('email', e)}
                            onBlur={() => onBlurHandler('email')}
                            value={values.email}
                            ref={(ref) => refsHandler('password', ref)}
                        />
                        {touched.email && !valid.email && (
                            <Text>Not valid</Text>
                        )}
                        {/* Using input binder, No need to take any other function than inputBinder from formr to work with input*/}
                        <TextInput
                            style={{
                                borderBottomColor: 'black',
                                borderWidth: 1,
                                width: '100%'
                            }}
                            {...inputBinder('phone')}
                        />
                        {touched.phone && !valid.phone && (
                            <Text>Not valid</Text>
                        )}
                        <Button
                            onPress={() => onSubmitHandler(console.log)}
                            title="Submit"
                            color="#841584"
                        />
                    </>;
                }}
            </Formr>
        </View>
    );
};

Options

Formr props

| Name | Type | Default | Description | Example | | --------------- | -------------------------- | ----------------------------- | ------------------------------------------------------------------------------------ | -------------------------------------- | | formFields | StringObject (Object) | {} | Form fields values | {email:""} | | validation | FormrValidation (Object) | {} | Form fields for validation | {email:{required:true,type:"email"}} | | onChange | Function | (values:StringObject)=>void | Function for observing fields changes | | onFinishFocus | Function | (values:StringObject)=>void | Function to trigger on all input focus finished on hitting return key on last input. | |

Form control functions

To control form fields, The Formr component will provide a function that include

| Name | Type | Usage | Descripion | Example | | ------------------------ | ------------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | | inputBinder | Function | inputBinder( key:string ) | Which includes almost everything of TextInput: value, onChangeText, onBlur, ref, onSubmitEditing also valid & touched if you are making custom input component with these props | <TextInput {...inputBinder('email')} /> | | onChangeHandler | Function | onChangeHandler( key:string, value:string ) | To set value of the field, call this function with arguments: key - which input field to update. value to that field | <TextInput onChangeText={ (text)=> onHandleChange("email":text) } /> | | onBlurHandler | Function | onBlurHandler( key:string ) | To set which field is blurred, call this function with key on blurrEvent | <TextInput onBlur={ ()=> onBlurHandler("email") } /> | | refsHandler | Function | refsHandler( key:string, ref:any ) | To set which field is blurred, call this function with key on blurrEvent | <TextInput ref={ (ref)=> refsHandler("email",ref) } /> | | onSubmitEditingHandler | Function | onSubmitEditingHandler( key:string ) | To set which field is blurred, call this function with key on blurrEvent | <TextInput onSubmitEditing={ ()=> onSubmitEditingHandler("email") } /> | | onSubmitHandler | Function | onSubmitHandler( callback:(values)=>{} ) | This handle submit button & validation flow. This is used to submit form. | <Button title="Submit" onPress={ ()=> onSubmitHandler( (values)=> submitFormToApi(values) ) } /> | | values | { [key:string]:string, ... } | values={ values[key] } | Objct of field values, can be used for value input for the TextInput | <TextInput value={values.email} /> | | valid | { [key:string]:boolean, ... } | | Its is This object contains validation results,true:valid and false:validation fail. | {!valid.email && <Text> This fields is invalid </Text>} | | touched | { [key:string]:boolean, ... } | | Its is used to show error message on validation fail. | {touched.email && !valid.email && <Text> This fields is invalid </Text>} |

Todo

• [ ] Add testing
• [ ] To add more validation types / Yup
• [ ] To remove validator dependancy / Yup
• [ ] Other elements & values support