Skip to main content

Mobile Number With Country Code

A MobileNumberWithCode mobile number with Country Code in it Country Code will be in dropdown

img

Usage​

import React from 'react'
import { MobileNumberWithCode } from 'qdm-component-library'

const defalutData = [
  {
    name: 'Afghanistan',
    altSpellings: 'AF',
    callingCodes: '93',
    flag: 'https://restcountries.eu/data/afg.svg',
  },
  {
    name: 'Åland Islands',
    altSpellings: 'AX',
    callingCodes: '355',
    flag: 'https://restcountries.eu/data/alb.svg',
  },
  {
    name: 'Bahrain',
    altSpellings: 'BH',
    callingCodes: '973',
    flag: 'https://restcountries.eu/data/bhr.svg',
  },
  {
    name: 'India',
    altSpellings: 'IN',
    callingCodes: '91',
    flag: 'https://restcountries.eu/data/ind.svg',
  },
]

function App() {
  return <MobileNumberWithCode dropdownData={Data} />
}
export default App

Reference​

Props​

here all the list of Props you can use for MobileNumberWithCode Component

onChange​

props for getting values as object it is a funcation

import React from 'react'
import { MobileNumberWithCode } from 'qdm-component-library'
const defalutData = [
  {
    name: 'Afghanistan',
    altSpellings: 'AF',
    callingCodes: '93',
    flag: 'https://restcountries.eu/data/afg.svg',
  },
  {
    name: 'Åland Islands',
    altSpellings: 'AX',
    callingCodes: '355',
    flag: 'https://restcountries.eu/data/alb.svg',
  },
  {
    name: 'Bahrain',
    altSpellings: 'BH',
    callingCodes: '973',
    flag: 'https://restcountries.eu/data/bhr.svg',
  },
  {
    name: 'India',
    altSpellings: 'IN',
    callingCodes: '91',
    flag: 'https://restcountries.eu/data/ind.svg',
  },
  {
    name: 'India',
    altSpellings: 'IN',
    callingCodes: '91',
    flag: 'https://restcountries.eu/data/ind.svg',
  },
  {
    name: 'India',
    altSpellings: 'IN',
    callingCodes: '91',
    flag: 'https://restcountries.eu/data/ind.svg',
  },
  {
    name: 'India',
    altSpellings: 'IN',
    callingCodes: '91',
    flag: 'https://restcountries.eu/data/ind.svg',
  },
  {
    name: 'India',
    altSpellings: 'IN',
    callingCodes: '91',
    flag: 'https://restcountries.eu/data/ind.svg',
  },
  {
    name: 'India',
    altSpellings: 'IN',
    callingCodes: '91',
    flag: 'https://restcountries.eu/data/ind.svg',
  },
  {
    name: 'India',
    altSpellings: 'IN',
    callingCodes: '91',
    flag: 'https://restcountries.eu/data/ind.svg',
  },
  {
    name: 'India',
    altSpellings: 'IN',
    callingCodes: '91',
    flag: 'https://restcountries.eu/data/ind.svg',
  },
]
function App() {
  const [Data] = React.useState(defalutData)
  const valfun = (val) => {
    console.log(val)
  }
  return (
    <MobileNumberWithCode dropdownData={Data} onChange={(val) => valfun(val)} />
  )
}
export default App

borderColor​

props for adding the MobileNumberWithCode color string by default it will be in #a7a7a7

import React from 'react'
import { MobileNumberWithCode } from 'qdm-component-library'

function App() {
  return <MobileNumberWithCode color="#a7a7a7a" />
}
export default App

value​

this props you can will set the value for the mobile number input box

import React from 'react'
import { MobileNumberWithCode } from 'qdm-component-library'

function App() {
  return (
    <MobileNumberWithCode
      lable={'lable'}
      value={'828228828228'}
      textWidth={50}
    />
  )
}
export default App

textColor​

props give addition props to change the text color

textColor defalut props black#

borderColor​

props give addition props to change the border color

marginAll​

props for margin for all the four sides of the Body by default it none number marginAll defalut props none

marginLR​

props for margin for left and right sides of the Body by default it none number marginLR defalut props none

marginTB​

props for margin for top and bottom sides of the Body by default it none number marginTB defalut props none

inLineStyles​

props give addition props to the MobileNumberWithCode element type Object