How to use react-phone-number-input - 10 common examples

To help you get started, we’ve selected a few react-phone-number-input examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github wevote / WebApp / src / js / components / Settings / VoterPhoneVerificationEntry.jsx View on Github external
onPhoneNumberChange (e) {
    const incomingVoterPhoneNumber = e.target.value;
    const voterSMSPhoneNumberWithPlus = `+${incomingVoterPhoneNumber}`;
    const voterSMSPhoneNumberWithPlusAndOne = `+1${incomingVoterPhoneNumber}`;

    const voterSMSPhoneNumberIsValidRaw = isValidPhoneNumber(incomingVoterPhoneNumber);
    const voterSMSPhoneNumberIsValidWithPlus = isValidPhoneNumber(voterSMSPhoneNumberWithPlus);
    const voterSMSPhoneNumberIsValidWithPlusAndOne = isValidPhoneNumber(voterSMSPhoneNumberWithPlusAndOne);
    const voterSMSPhoneNumberIsValid = voterSMSPhoneNumberIsValidRaw || voterSMSPhoneNumberIsValidWithPlus || voterSMSPhoneNumberIsValidWithPlusAndOne;
    // console.log('onPhoneNumberChange, incomingVoterPhoneNumber: ', incomingVoterPhoneNumber, ', voterSMSPhoneNumberIsValid:', voterSMSPhoneNumberIsValid);
    // console.log('voterSMSPhoneNumberWithPlus:', voterSMSPhoneNumberWithPlus);
    // console.log('voterSMSPhoneNumberWithPlusAndOne:', voterSMSPhoneNumberWithPlusAndOne);
    this.setState({
      disablePhoneVerificationButton: !voterSMSPhoneNumberIsValid,
      voterSMSPhoneNumber: incomingVoterPhoneNumber,
      voterSMSPhoneNumberIsValid,
    });
  }
github wevote / WebApp / src / js / components / Settings / VoterPhoneVerificationEntry.jsx View on Github external
onPhoneNumberChange (e) {
    const incomingVoterPhoneNumber = e.target.value;
    const voterSMSPhoneNumberWithPlus = `+${incomingVoterPhoneNumber}`;
    const voterSMSPhoneNumberWithPlusAndOne = `+1${incomingVoterPhoneNumber}`;

    const voterSMSPhoneNumberIsValidRaw = isValidPhoneNumber(incomingVoterPhoneNumber);
    const voterSMSPhoneNumberIsValidWithPlus = isValidPhoneNumber(voterSMSPhoneNumberWithPlus);
    const voterSMSPhoneNumberIsValidWithPlusAndOne = isValidPhoneNumber(voterSMSPhoneNumberWithPlusAndOne);
    const voterSMSPhoneNumberIsValid = voterSMSPhoneNumberIsValidRaw || voterSMSPhoneNumberIsValidWithPlus || voterSMSPhoneNumberIsValidWithPlusAndOne;
    // console.log('onPhoneNumberChange, incomingVoterPhoneNumber: ', incomingVoterPhoneNumber, ', voterSMSPhoneNumberIsValid:', voterSMSPhoneNumberIsValid);
    // console.log('voterSMSPhoneNumberWithPlus:', voterSMSPhoneNumberWithPlus);
    // console.log('voterSMSPhoneNumberWithPlusAndOne:', voterSMSPhoneNumberWithPlusAndOne);
    this.setState({
      disablePhoneVerificationButton: !voterSMSPhoneNumberIsValid,
      voterSMSPhoneNumber: incomingVoterPhoneNumber,
      voterSMSPhoneNumberIsValid,
    });
  }
github wevote / WebApp / src / js / components / Settings / VoterPhoneVerificationEntry.jsx View on Github external
onPhoneNumberChange (e) {
    const incomingVoterPhoneNumber = e.target.value;
    const voterSMSPhoneNumberWithPlus = `+${incomingVoterPhoneNumber}`;
    const voterSMSPhoneNumberWithPlusAndOne = `+1${incomingVoterPhoneNumber}`;

    const voterSMSPhoneNumberIsValidRaw = isValidPhoneNumber(incomingVoterPhoneNumber);
    const voterSMSPhoneNumberIsValidWithPlus = isValidPhoneNumber(voterSMSPhoneNumberWithPlus);
    const voterSMSPhoneNumberIsValidWithPlusAndOne = isValidPhoneNumber(voterSMSPhoneNumberWithPlusAndOne);
    const voterSMSPhoneNumberIsValid = voterSMSPhoneNumberIsValidRaw || voterSMSPhoneNumberIsValidWithPlus || voterSMSPhoneNumberIsValidWithPlusAndOne;
    // console.log('onPhoneNumberChange, incomingVoterPhoneNumber: ', incomingVoterPhoneNumber, ', voterSMSPhoneNumberIsValid:', voterSMSPhoneNumberIsValid);
    // console.log('voterSMSPhoneNumberWithPlus:', voterSMSPhoneNumberWithPlus);
    // console.log('voterSMSPhoneNumberWithPlusAndOne:', voterSMSPhoneNumberWithPlusAndOne);
    this.setState({
      disablePhoneVerificationButton: !voterSMSPhoneNumberIsValid,
      voterSMSPhoneNumber: incomingVoterPhoneNumber,
      voterSMSPhoneNumberIsValid,
    });
  }
github Readify / telstra-purple-signatures / src / util / index.js View on Github external
export const parseMobile = mobileNum => {
  if (mobileNum === undefined) return null;

  // some random number, trust the user
  if (
    !isValidPhoneNumber(mobileNum) &&
    !isValidPhoneNumber(purple.default.countryCode + mobileNum)
  )
    return mobileNum;
  // default to preset country code when the international prefix '+' is absence
  if (mobileNum.search(/\+/) < 0) {
    mobileNum = purple.default.countryCode + mobileNum;
  }

  return formatPhoneNumberIntl(mobileNum);
};
github TrustedPlus / esign / app / components / Services / ModifyService.tsx View on Github external
handleApply = () => {
    const { localize, locale } = this.context;
    // tslint:disable-next-line:no-shadowed-variable
    const { changeServiceName, changeServiceSettings, service } = this.props;
    const { stateService } = this.state;

    if (service.type && service.type === MEGAFON) {
      if (stateService && stateService.settings) {
        if (!stateService.settings.mobileNumber || !isValidPhoneNumber(stateService.settings.mobileNumber)) {
          $(".toast-invalid_phone_number").remove();
          Materialize.toast(localize("Services.invalid_phone_number", locale), 2000, "toast-invalid_phone_number");

          return;
        }

        changeServiceName(service.id, stateService.name);

        if (stateService.settings.mobileNumber !== service.settings.mobileNumber) {
          if (this.props.mapServices
            .get("entities")
            .find((item: IService) => item.settings.mobileNumber === stateService.settings.mobileNumber)
          ) {
            $(".toast-mobile_number_already_exists").remove();
            Materialize.toast(localize("Services.mobile_number_already_exists", locale), 2000, "toast-mobile_number_already_exists");
          } else {
github VolcaTech / eth2-app / src / components / SendTab / SendTab.jsx View on Github external
phone = "+" + phone.replace(/\D+/g, "");

        // get dial code from phone number
        const formatter = new asYouType();
        formatter.input(phone);
        const phoneCode = formatter.country_phone_code;

        //format balance
        let balance;
        const web3 = web3Service.getWeb3();
        if (this.props.balanceUnformatted) {
        balance = web3.fromWei(this.props.balanceUnformatted, 'ether').toNumber();
    }

        // check that phone number is valid
        if (!isValidPhoneNumber(phone) && phone !== "+71111111111") {
            this.setState({ fetching: false, errorMessage: "Phone number is invalid", phoneError: true });
            return;
        };

        // check amount
        if (this.state.amount <= 0) {
            this.setState({ fetching: false, errorMessage: "Amount should be more than 0", numberInputError: true });
            return;
        };

        // check amount maximum
        if (this.state.amount > 1) {
            this.setState({ fetching: false, errorMessage: (<span>*In beta you can send <span style="{styles.betaBold}">1 ETH</span> max.</span>), numberInputError: true });
            return;
        };
github Readify / telstra-purple-signatures / src / util / index.js View on Github external
export const parseMobile = mobileNum =&gt; {
  if (mobileNum === undefined) return null;

  // some random number, trust the user
  if (
    !isValidPhoneNumber(mobileNum) &amp;&amp;
    !isValidPhoneNumber(purple.default.countryCode + mobileNum)
  )
    return mobileNum;
  // default to preset country code when the international prefix '+' is absence
  if (mobileNum.search(/\+/) &lt; 0) {
    mobileNum = purple.default.countryCode + mobileNum;
  }

  return formatPhoneNumberIntl(mobileNum);
};
github Readify / telstra-purple-signatures / src / util / index.js View on Github external
export const parseMobile = mobileNum =&gt; {
  if (mobileNum === undefined) return null;

  // some random number, trust the user
  if (
    !isValidPhoneNumber(mobileNum) &amp;&amp;
    !isValidPhoneNumber(purple.default.countryCode + mobileNum)
  )
    return mobileNum;
  // default to preset country code when the international prefix '+' is absence
  if (mobileNum.search(/\+/) &lt; 0) {
    mobileNum = purple.default.countryCode + mobileNum;
  }

  return formatPhoneNumberIntl(mobileNum);
};
github VolcaTech / eth2-app / src / components / SendTab / VerifiedProxy / Form.jsx View on Github external
value={component.state.phone} onChange={phone =&gt; {
			   const phoneIsValid = isValidPhoneNumber(phone);
			   const formatter = new asYouType();
			   formatter.input(phone);
			   this.setState({ phoneCode: formatter.country_phone_code, phone, phoneIsValid });
		      }} /&gt;<div style="{{">{this.state.phoneIsValid ? <div></div> : ""}</div>
github TrustedPlus / esign / app / components / Services / AddService.tsx View on Github external
const service: IService = {
      id,
      name: serviceName,
      settings: serviceSettings,
      type: serviceType,
    };

    if (service.type === MEGAFON) {
      if (this.props.megafon.isStarted) {
        $(".toast-already_started").remove();
        Materialize.toast(localize("Services.already_started", locale), 2000, "toast-already_started");

        return;
      }

      if (service.settings && !service.settings.mobileNumber || !isValidPhoneNumber(service.settings.mobileNumber)) {
        $(".toast-invalid_phone_number").remove();
        Materialize.toast(localize("Services.invalid_phone_number", locale), 2000, "toast-invalid_phone_number");

        return;
      }

      if (this.props.mapServices
        .get("entities")
        .find((item: IService) => item.settings.mobileNumber === service.settings.mobileNumber)
      ) {
        $(".toast-mobile_number_already_exists").remove();
        Materialize.toast(localize("Services.mobile_number_already_exists", locale), 2000, "toast-mobile_number_already_exists");

        return;
      }
    } else if (service.type === CRYPTOPRO_DSS) {

react-phone-number-input

Telephone number input React component

MIT
Latest version published 1 month ago

Package Health Score

76 / 100
Full package analysis