Note: Purchase Milk

    goten-react-text-field

    1.1.4 • Public • Published

    Goten Text Field

    GotenTextField is a React component that facilitates the use of text inputs.

    • It allows to bind an object to the value of a text input.
      • This avoids common boilerplate of state definition and setState calls.
    • It helps validating a text input using its type.
      • You can specify a pattern (Regex) for the validation.
      • You can modify the error's display message and add certain functionality like pop-ups.

    Index

    Install

    npm install goten-react-text-field

    Usage

    var GotenTextField = require('goten-react-text-field').GotenTextField; // ES5
     
    import { GotenTextField } from 'goten-react-text-field'; // ES6
     
    refsGotenTextFieldWithPattern = React.createRef()
    gotenTextFields = {}
     
    <GotenTextField
        label={'Date Pattern'}
        placeholder={'Insert a date: dd/mm/yyyy'}
        type={'text'}
        pattern={'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'}
        errorMessage={'Please insert a text using the correct pattern'}
        errorRequiredMessage={'This field is required'}
        required={true}
        showError={true}
        bindContainer={this.gotenTextFields}
        bindProp={'pattern'}
        ref={this.refsGotenTextFieldWithPattern}
    />
     
    validate() {
        return refsGotenTextFieldWithPattern.current.validate()
    }

    Example of use

    import React, { Component } from 'react'
    import { GotenTextField } from 'goten-react-text-field'
     
    const state = {
        changeOnPress: true
    }
     
    export default class App extends Component {
        constructor(props) {
            super(props)
            this.state = state
            this.refsGotenTextFieldWithPattern = React.createRef()
            this.gotenTextFields = {}
        }
     
        render() {
            return (
                <div>
                    <div className='title'>GotenTextField</div>
                    <GotenTextField
                        placeholder={'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'}
                        // label={'Date Pattern'}
                        componentLabel={
                            <label>
                                Date Pattern
                            </label>
                        }
                        type={'text'} // emailnumberpassworddatetimeurl
                        pattern={'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'}
                        errorMessage={'Please insert a text using the correct pattern'}
                        errorRequiredMessage={'This field is required'}
                        required={true}
                        showError={true}
                        bindContainer={this.gotenTextFields}
                        bindProp={'pattern'}
                        ref={this.refsGotenTextFieldWithPattern}
                    />  
                    <br/>
                    <br/>
                    <input
                        type='submit'
                        value='Validate And Show Input'
                        onClick={() => {
                            this.setState({changeOnPress: !this.state.changeOnPress})
                            this.refsGotenTextFieldWithPattern.current.validate()
                        }}
                    />
                </div>
            )
        }
    }

    Props

    Prop Name Type Default Description
    bindContainer Object Container of the attributes that will be binded to the value of the text fields.
    bindProp String Attribute`s name of the bindContainer object.
    componentLabel Component Label component, same as 'label' but with a component.
    errorMessage String, Component String Message Error message corresponding to the pattern or type.
    errorRequiredMessage String, Component String Message Error message corresponding to the 'required' prop.
    label String Label of the text field.
    pattern String Pattern to validate the value of the text field with.
    placeholder String Placeholder.
    required Boolean False Whether the text field is required (true) or not.
    showError Boolean False Whether to show error messages (true) or not.
    type String text The text field's type.
    • All other props are inherited from the react component input

    Methods

    • validate()

    Validate the GotenTextField using the props types, pattern and required.

    • clearError()

    Clears the text field's error (if any).

    • clear()

    Clears any text and errors the text field has.

    Contributions

    To contribute to this package, we use 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, naming it like #<issue_number>-<descriptive_name>.
    3. Send a pull request and wait for approval/corrections.

    Install

    npm i goten-react-text-field

    DownloadsWeekly Downloads

    1

    Version

    1.1.4

    License

    ISC

    Unpacked Size

    22.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • joncolque
    • lucasp90
    • nicolas-meilan
    • tcanusso