Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including dual-input-component with all npm packages installed. Try it out:

var dualInputComponent = require("dual-input-component")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

dual-input-component v0.1.4

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

#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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free