React-Easy-Input

A simple react input component that takes 5min to setup, but can also be fully customized to handle any kind of validation and/or masking More documentation will be added within a week.

What does example usage look like?

Usage within a react component: dummyComponent.jsx:

import React from 'react'
import {Input, isInvalid} from 'react-easy-input'                               /* <--- step 1 */


class dummyComponent extends React.Component {
    constructor (props) {
        super(props)
        this.state ={
            emailState:""
        }
    }
    
    onSubmit = () => {
        if (isInvalid(this.state.emailState)) {                                 /* <--- step 2 */
            console.log("Yo, "+this.state.emailState+" is not a valid email")
        }
    }
    
    render() {
        return <div>
            <h1>Hello World</h1>
            <div>What's your email?</div>
            <Input this={this} linkTo="emailState" type="email"  />             /* <--- step 3 */
            <button onClick={this.onSubmit}>Click Me</button>
        </div>
    }
}
export default dummyComponent

Installation

npm install -s react-easy-input

How am I supposed to use this? (documentation)

Use-case 1: basic input

Import the component import {Input} from 'react-easy-input' Then in the render function put <Input this={this} linkTo="name"/> this will bind the input field to this.state.name.

Use-case 2: styling (valid vs invalid)

Import the component import {Input} from 'react-easy-input' Then in the render function put

<Input this={this} linkTo="email" type="email" style={{backgroundColor:"blue"}} invalidStyle={{backgroundColor:"red"}}/>

Because type="email" is one of the easy-input builtin types, it will automatically validate and switch to the invalidStyle whenever the input isn't an email.

Use-case 3: checking if valid (most common use case)

First Import the tools import {Input, isInvalid} from 'react-easy-input' Then in the render function put <Input this={this} linkTo="blah" type="email"/> Now in any other function in your component, you can call isValid(this.state.blah) and it will return true/false based on if the input is valid. To get the primitive value of the input (regardless if its valid/invalid) do this.state.blah.valueOf() <*> See the "# What does example usage look like?" for an example of this

Use-case 4: custom validator + errorMsg

First Import the tools import {Input, Invalid, isInvalid} from 'react-easy-input' Then somewhere in the file, create a function like this

function passwordIncomingFilter (userInput) {
    // if longer than 10, its considered valid
    if (userInput.length > 10) {
        // return user input if valid
        return userInput
    } else {
        // return new Invalid obj, if value is Invalid
        errMsg = "password needs to be 10 characters or more" // optional
        return new Invalid(userInput, errMsg)
    }

The function should

1. accept userInput as the first argument
2. return userInput when valid
3. return new Invalid(userInput) when invalid

<Input this={this} linkTo="password" type="password" incomingFilter={passwordIncomingFilter}/>

And if you'd like to display an error message, you can add this below it

{ isInvalid(this.state.passwordState) && <div>{this.state.passwordState.errorMsg}</div> }

Here is a full example

import React from 'react'
import {Input, Invalid, isInvalid} from 'react-easy-input'


class dummyComponent extends React.Component {
    constructor (props) {
        super(props)
        this.state ={
            emailState:"",
            passwordState:"",
        }
    }
    
    passwordIncomingFilter = (userInput) => {
        if (userInput.match(/.*[0-9].*/) // has number
        && userInput.match(/.*[a-z].*/)  // has lowercase letter
        && userInput.match(/.*[A-Z].*/)  // has uppercase letter
        && userInput.length > 10) {      // longer than 10 chars
            return userInput
        }
        // else
        let errMsg = "Needs to be >10 charaters include a number, uppercase letter, and lowercase letter"
        return new Invalid(userInput, errMsg)
    }
    
    onSubmit = () => {
        // if both values are valid
        if ( !isInvalid(this.state.emailState && !isInvalid(this.state.passwordState) ) {
            alert('Your input is formatted correctly!')
        // if either are invalid
        } else {
            alert('Your input is NOT formatted correctly!')
        }
    }
    
    render() {
        return <div>
            <h1>Hello World</h1>
            
            {/* Email */}
            <Input 
                this={this} 
                placeholder="Email" 
                linkTo="emailState" 
                type="email"
                />
            { isInvalid(this.state.emailState) && <div>{this.state.emailState.errorMsg}</div> }

            {/* Password */}
            <Input 
                this={this} 
                placeholder="Password" 
                linkTo="passwordState" 
                type="password"
                incomingFilter={this.passwordIncomingFilter}
                />
            { isInvalid(this.state.passwordState) && <div>{this.state.passwordState.errorMsg}</div> }
            
            <button onClick={this.onSubmit}>Click Me</button>
        </div>
    }
}
export default dummyComponent

Use-case 5: input + masking + validator

yet to be documented