No description or website provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
dist
public
src
.babelrc
.gitignore
README.md
package.json
project.config.js

README.md

react-floating-label-paper-input

Install

npm install react-floating-label-paper-input --save

Demo

Demo

Properties

type : string

Type of input you want currently its supporting three types

  1. text(Default value)
  2. inputMask(Using react-input-mask npm package for that but if you want to pass type of inputMask then pass as a props inputMaskType eg. tel, number etc.)

labelName : string

Floating label like placeholder

isValid : boolean

If you want to display error message pass as isValid={false}

errorMessage : string

Error message which you want to display

options : array

If you are passing type="select" then this options need to pass a props to display options in select box

Example type=text type=tel etc.

import React,{Component} from "react"
import FloatingLabelInput from "react-floating-label-paper-input"; 

class FloatingLabelTextExample extends Component{
    constructor(props){
        super(props);
        this.handleForm = this.handleForm.bind(this);
        this.isValid = this.isValid.bind(this);
        this.getValidationMessages = this.getValidationMessages.bind(this);
        this.state = {
            formData:{}
        }
    }
    isValid(key){
        return false;
    }
    getValidationMessages(key){
        return `${key} is require`;
    }
    handleForm(key,value){
        this.setState({
          formData: Object.assign({}, this.state.formData, { [key]: value }),
        });
    }
    render(){
        return(
            <FloatingLabelInput type={"text"} labelName={"firstname"} onChange={(e) => {e.preventDefault();this.handleForm("firstname", e.currentTarget.value)}} name={"firstname"} value={this.state.formData.firstname ? this.state.formData.firstname : ""} isValid={this.isValid('firstname')} errorMessage={this.getValidationMessages('firstname')} />
        )
    }
}
export default FloatingLabelTextExample;

Example type=inputMask

For more info about props using inputMask InputMask

import React,{Component} from "react"
import FloatingLabelInput from "react-floating-label-paper-input"; 

class FloatingLabelInputMaskExample extends Component{
    constructor(props){
        super(props);
        this.handleForm = this.handleForm.bind(this);
        this.isValid = this.isValid.bind(this);
        this.getValidationMessages = this.getValidationMessages.bind(this);
        this.state = {
            formData:{}
        }
    }
    isValid(key){
        return false;
    }
    getValidationMessages(key){
        return `${key} is require`;
    }
    handleForm(key,value){
        this.setState({
          formData: Object.assign({}, this.state.formData, { [key]: value }),
        });
    }
    render(){
        return(
            <FloatingLabelInput type={"inputMask"} maskChar={" "} mask={99-99-9999} labelName={"Date of birth"} placeHolder={"MM-DD-YYYYY"} onChange={(e) => {e.preventDefault();this.handleForm("dob", e.currentTarget.value)}} name={"dob"} value={this.state.formData.dob ? this.state.formData.dob : ""} isValid={this.isValid('dob')} errorMessage={this.getValidationMessages('dob')} />
        )
    }
}
export default FloatingLabelInputMaskExample;

Example type=select

import React,{Component} from "react"
import FloatingLabelInput from "react-floating-label-paper-input"; 

class FloatingLabelInputMaskExample extends Component{
    constructor(props){
        super(props);
        this.handleForm = this.handleForm.bind(this);
        this.isValid = this.isValid.bind(this);
        this.getValidationMessages = this.getValidationMessages.bind(this);
        this.state = {
            formData:{}
        }
    }
    isValid(key){
        return false;
    }
    getValidationMessages(key){
        return `${key} is require`;
    }
    handleForm(key,value){
        this.setState({
          formData: Object.assign({}, this.state.formData, { [key]: value }),
        });
    }
    render(){
        var options = [
            {label: "Gujarat",value: "GJ"},
            {label: "Maharastra",value: "MH"},
            {label: "Karnataka",value: "KA"},
            {label: "Telangana",value: "TS"},
            {label: "Andhra Pradesh",value: "AP"},
        ]
        return (
            <FloatingLabelInput type={"select"} options={options} labelName={"State"} onChange={(e) => {e.preventDefault();this.handleForm("state", e.currentTarget.value)}} name={"state"} value={this.state.formData.state ? this.state.formData.state : ""} isValid={this.isValid('state')} errorMessage={this.getValidationMessages('state')} />
        )
    }
}
export default FloatingLabelInputMaskExample;