Natively Pronounced Mandarin
Miss any of our Open RFC calls?Watch the recordings here! »

dual-input-component

0.1.4 • Public • Published

Dual Input Component

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

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.

Install

npm i dual-input-component

DownloadsWeekly Downloads

6

Version

0.1.4

License

none

Unpacked Size

453 kB

Total Files

10

Last publish

Collaborators

  • avatar