react-input-textboxs

    1.3.5 • Public • Published

    NPM

    react-input-textboxs

    This (react-input-textboxs) is a JavaScript library for React Applicaiton.

    The react package contains form input box with variety of styles.

    Example: FloatingLabel,FloatingLable with outline border etc..

    Demo

    Checkout the Demo

    Documendation

    checkout the Docs

    Installation

    npm i react-input-textboxs //This will download the latest version of Module.

    Import in your project file

    import {FloatingLabel,TextBox,Select} from 'react-input-textboxs'

    Declare inside the render menthod

    Input Field

    this.state = {
        name : "Siva",
        password : "Shiva@123",
        selectvalue : [],
        selectvalue2 : ""
    }
    
    handleChange(value,key){
        this.setState({[key]:value})
    }
    <FloatingLabel 
        label="your name" 
        type="text"
        value={this.state.name}
        variant="outline"
        onChange={(value)=>this.handleChange(value,'name')} />
    
    <FloatingLabel 
        label={"Password"} 
        type={"password"}
        value={this.state.password}
        variant="standared"
        onChange={(value)=>this.handleChange(value,'password')} />
    
    
    <TextBox  
        type={"password"}
        readOnly={true}
        value={this.state.password}
        placeholder={"Enter the Password"}
        onChange={(value)=>this.handleChange(value,'password')} />
    
    <TextBox  
        label={"Enter your Name"} 
        type={"password"}
        readOnly={true}
        value={this.state.name}
        placeholder={"Enter your Name"}
        onChange={(value)=>this.handleChange(value,'name')} />
    

    Select

    <Select
        value={this.state.selectvalue}
        onChange={(value) => this.handleChange(value, 'selectvalue')}
        multiple
        label="Select from list...."
        options={["siva","prakash","Manisha","Srinivasan"]} />
            
    <Select
        value={this.state.selectvalue2}
        onChange={(value) => this.handleChange(value, 'selectvalue2')}
        label="Select from list...."
        options={["siva","prakash","Manisha","Srinivasan"]} />
    

    Select with Filter

    <Select
        value={this.state.selectvalue}
        onChange={(value) => this.handleChange(value, 'selectvalue')}
        multiple
        filter
        label="Select from list...."
        options={["siva","prakash","Manisha","Srinivasan"]} />
            
    <Select
        value={this.state.selectvalue2}
        onChange={(value) => this.handleChange(value, 'selectvalue2')}
        filter
        label="Select from list...."
        options={["siva","prakash","Manisha","Srinivasan"]} />
    

    Select with MaxResultCount

    <Select
              value={this.state.selectvalue2}
              multiple
              maxResultCount={2}
              onChange={value => this.handleChange(value, "selectvalue2")}
              label="Select from list...."
              options={["siva", "prakash", "Manisha", "Srinivasan"]}
    />
    

    Props

    Common props you may want to specify include:

    • label - Label of input field
    • type - Type of input field like Text,Password,email etc..
    • value - Value of input field
    • variant - style of input field
    • onChange - Function while change the input value
    • placeholder - Placeholder of input field

    License

    MIT Licensed.

    Install

    npm i react-input-textboxs

    DownloadsWeekly Downloads

    1

    Version

    1.3.5

    License

    MIT

    Unpacked Size

    33.2 kB

    Total Files

    4

    Last publish

    Collaborators

    • linuxshiva