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 */ Component { thisstate = emailState:"" } { if /* <--- step 2 */ console } { return <div> <h1>Hello World</h1> <div> your email?</div> <Input = ="emailState" ="email" /> /* <--- step 3 */ <button =>Click Me</button> </div> }}
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 = ="email" ="email" = =/>
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
{ // if longer than 10, its considered valid if userInputlength > 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 userInput errMsg
The function should
- accept userInput as the first argument
- return userInput when valid
- return new Invalid(userInput) when invalid
Then in the render function put
And if you'd like to display an error message, you can add this below it
&& <div>thisstatepasswordStateerrorMsg</div>
Here is a full example
import React from 'react'import Input Invalid isInvalid from 'react-easy-input' Component { thisstate = emailState:"" passwordState:"" } { if userInput // has number && userInput // has lowercase letter && userInput // has uppercase letter && userInputlength > 10 // longer than 10 chars return userInput // else let errMsg = "Needs to be >10 charaters include a number, uppercase letter, and lowercase letter" return userInput errMsg } { // if both values are valid if ! // if either are invalid else } { return <div> <h1>Hello World</h1> /* Email */ <Input = ="Email" ="emailState" ="email" /> && <div>thisstateemailStateerrorMsg</div> /* Password */ <Input = ="Password" ="passwordState" ="password" = /> && <div>thisstatepasswordStateerrorMsg</div> <button =>Click Me</button> </div> }}
Use-case 5: input + masking + validator
yet to be documented