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:

``

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 

            Hello World

            What's your email?

                         / <--- step 3 /
            
        

    }
}
export default dummyComponent


Installation

npm install -s react-easy-input


How am I supposed to use this? (documentation)

$3

Import the component

import {Input} from 'react-easy-input'



Then in the render function put

 this will bind the input field to this.state.name.

$3

Import the component

import {Input} from 'react-easy-input'



Then in the render function put

jsx


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.
$3

First Import the tools

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



Then in the render function put



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
$3

First Import the tools

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



Then somewhere in the file, create a function like this

javascript
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


Then in the render function put

`html`And if you'd like to display an error message, you can add this below it`jsx { isInvalid(this.state.passwordState) &&

{this.state.passwordState.errorMsg}



Here is a full example

jsx
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 

            Hello World

            
            {/ Email /}
                            this={this} 
                placeholder="Email" 
                linkTo="emailState" 
                type="email"
                />
            { isInvalid(this.state.emailState) && {this.state.emailState.errorMsg}
 }
            {/ Password /}
                            this={this} 
                placeholder="Password" 
                linkTo="passwordState" 
                type="password"
                incomingFilter={this.passwordIncomingFilter}
                />
            { isInvalid(this.state.passwordState) && 
{this.state.passwordState.errorMsg}
 }
            
            
        

    }
}
export default dummyComponent

$3

yet to be documented

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:

``

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 

            Hello World

            What's your email?

                         / <--- step 3 /
            
        

    }
}
export default dummyComponent


Installation

npm install -s react-easy-input


How am I supposed to use this? (documentation)

$3

Import the component

import {Input} from 'react-easy-input'



Then in the render function put

 this will bind the input field to this.state.name.

$3

Import the component

import {Input} from 'react-easy-input'



Then in the render function put

jsx


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.
$3

First Import the tools

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



Then in the render function put



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
$3

First Import the tools

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



Then somewhere in the file, create a function like this

javascript
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


Then in the render function put

`html`And if you'd like to display an error message, you can add this below it`jsx { isInvalid(this.state.passwordState) &&

{this.state.passwordState.errorMsg}



Here is a full example

jsx
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 

            Hello World

            
            {/ Email /}
                            this={this} 
                placeholder="Email" 
                linkTo="emailState" 
                type="email"
                />
            { isInvalid(this.state.emailState) && {this.state.emailState.errorMsg}
 }
            {/ Password /}
                            this={this} 
                placeholder="Password" 
                linkTo="passwordState" 
                type="password"
                incomingFilter={this.passwordIncomingFilter}
                />
            { isInvalid(this.state.passwordState) && 
{this.state.passwordState.errorMsg}
 }
            
            
        

    }
}
export default dummyComponent

$3

yet to be documented