Dual Input Component

Single switchable component for email and phone number (web & react-native support) 🌐📱

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: "[phone]"
           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.