dual-input-component
Single switchable component for email and phone number (web & react-native support)
Last updated 3 months ago by kreysix .
Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install dual-input-component 
SYNC missed versions from official npm registry.

#Dual Input Component Single switchable component for email and phone number (web & react-native support) :globe_with_meridians::iphone:

license GitHub top language npm

Installation and usage

Install the package via npm:

npm install --save dual-input-component

Then use it in your app:

import React, { Component } from 'react';
import CustomInput from 'dual-input-component';

class App extends Component
{

    handleChange=(value)=>{
        console.log(value)
    }
    // => {dialCode: "+91"
           parsedNumber: "+913528712361"
           phoneNumber: "3528712361"}
    
  render()
  {
    return (
        <CustomInput
            onChange={(value,state)=>this.handleChange(value)}
            disableEmail={true}
            style={{
              width:200,
              backgroundColor: 'white',
              alignItems: 'center',
              justifyContent: 'center',}}
        />
    );
  }
}

Props

Name Type Required Default Description
defaultCountry string no 'IN' sets default country code and flag for the initial render
disableEmail boolean no false option whether to disable email input or not
disablePhoneNumber boolean no false option whether to disable phone number input or not
disableAnimation boolean no false option whether to disable animation while switching between email or phone number (only applicable when disablePhone and disablePhoneNumber is false)
hideLabel boolean no false option whether to hide or show label
onChange function yes - Callback which returns the validated output object
style object yes { width: 200, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center' } styles which are apllied to the container element
labelTitle string no ' ' content of the label to display
labelStyle object no {} styles which are applied to labels
listItemStyle object no {height:60} styles which are applied to individual items in list
inputFieldStyle object no {} styles which are applied to input box in the component

##Contributing: All your suggestions and PRs are welcome.

Current Tags

  • 0.1.4                                ...           latest (3 months ago)

4 Versions

  • 0.1.4                                ...           3 months ago
  • 0.1.3                                ...           3 months ago
  • 0.1.2                                ...           3 months ago
  • 0.1.1                                ...           3 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 4
Dependencies (11)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |