goten-react-form

Goten Form

Goten Form is a react component that facilitates the validation of the Goten components.

Index

• Install
• Usage
• Example of use
• Props
• Methods
• Contributions

Install

npm install -s goten-react-form

Usage

var GotenForm = require('goten-react-form').GotenForm; // ES5
 
import { GotenForm } from 'goten-react-form'; // ES6
 
 
<GotenForm
    onSuccess = {() => console.log("onSuccessMethod")}
/>
    <Component1>
        <GotenComponent/>
    </Component1>
    <GotenComponent/>
    <Component2/>
</GotenForm>

Example of use

With buttonComponent

import React, { Component } from 'react'
import { GotenTextField } from 'goten-react-text-field'
import { GotenForm } from 'goten-react-from'
 
export default class App extends Component {
    render() {
        return (
            <GotenForm
                onSuccess = {()=> console.log("SUCCESS")}
                onError = {() => console.log("ERROR")}
                buttonComponent = {
                    <input
                        type='submit'
                        value='Validate Form'
                    />
                }
            >
                <div className='title'>TITLE</div>
                <table>
                    <tbody>
                        <tr>
                            <th className='item'>
                                <GotenTextField
                                    placeholder={'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'}
                                    label={'Date Pattern'}
                                    type={'text'}
                                    pattern={'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'}
                                    errorMessage={'Please inset a text using the correct pattern'}
                                    errorRequiredMessage={'This field is required'}
                                    required={true}
                                    showError={true}
                                />
                            </th>
                            <th className='item'>
                                <GotenTextField
                                    placeholder={'Insert a email'}
                                    label={'Email'}
                                    type={'email'}
                                    showError={true}
                                />
                            </th>
                        </tr>
                    </tbody>
                </table>
            </GotenForm>
        )
    }
}

Without buttonComponent

import React, { Component } from 'react'
import { GotenTextField } from 'goten-react-text-field'
import { GotenForm } from 'goten-react-from'
 
export default class App extends Component {
    this.refForm = React.createRef()
 
    render() {
        return (
            <GotenForm
                onSuccess = {() => console.log("SUCCESS")}
                onError = {() => console.log("ERROR")}
                ref = {this.refForm}
            >
                <div className='title'>TITLE</div>
                <table>
                    <tbody>
                        <tr>
                            <th className='item'>
                                <GotenTextField
                                    placeholder={'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'}
                                    label={'Date Pattern'}
                                    type={'text'}
                                    pattern={'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'}
                                    errorMessage={'Please inset a text using the correct pattern'}
                                    errorRequiredMessage={'This field is required'}
                                    required={true}
                                    showError={true}
                                />
                            </th>
                            <th className='item'>
                                <GotenTextField
                                    placeholder={'Insert a email'}
                                    label={'Email'}
                                    type={'email'}
                                    showError={true}
                                />
                            </th>
                        </tr>
                    </tbody>
                </table>
                <input
                    type='submit'
                    value='Validate Form'
                    onClick={() => this.refForm.current.validate()}
                />
            </GotenForm>
        )
    }
}

Props

Prop Name	Type	Default	Required	Description
onSuccess	Function		True	This function is executed when all Goten components are validated correctly.
onError	Function		False	This function is executed when all Goten components are validated correctly.
buttonComponent	Component		False	Component that will be clicked.

Methods

• validate()

Validate all Goten components inside the GotenForm.

Contributions

To contribute to this package, we propose the following workflow:

1. Add an issue with related tags to describe the contribution (is it a bug?, a feature request?).
2. Branch your solution from develop, with the name as #<issue_number>_<descriptive_name>.
3. Send a pull request and wait for approval/corrections.