ورودی شماره موبایل ایرانی برای React و جاوااسکریپت

# the .tgz from the download, copied into your project
npm install ./vendor/nikaweb-iranian-phone-input-1.0.0.tgz

'use client'
import { useState } from 'react'
import { IranianPhoneInput } from '@nikaweb/iranian-phone-input/react'
import '@nikaweb/iranian-phone-input/styles.css'

export function MobileField() {
  const [mobile, setMobile] = useState('')
  const [valid, setValid] = useState(false)
  return (
    <>
      <label htmlFor="mobile">شماره موبایل</label>
      <IranianPhoneInput
        id="mobile"
        required
        value={mobile}
        onChange={setMobile}      // '+989121234567'
        onValidChange={setValid}
      />
      <button disabled={!valid}>ارسال کد</button>
    </>
  )
}

// app/signup/page.tsx — a Server Component
import { IranianPhoneInput } from '@nikaweb/iranian-phone-input/react'
import { normalizeIranianMobile } from '@nikaweb/iranian-phone-input'

async function signup(formData: FormData) {
  'use server'
  const mobile = normalizeIranianMobile(formData.get('mobile'))
  if (!mobile) throw new Error('invalid mobile')
  // '+989121234567', however it was typed
}

export default function Page() {
  return (
    <form action={signup}>
      <IranianPhoneInput name="mobile" required />
      <button>ثبت‌نام</button>
    </form>
  )
}

<input id="mobile" required>
<input type="hidden" name="mobile" id="mobile-value">
<p id="mobile-error"></p>

<script src="/js/iranian-phone-input.global.js"></script>
<script>
  IranianPhone.bindPhoneInput(document.getElementById('mobile'), {
    mirror: document.getElementById('mobile-value'),
    message: document.getElementById('mobile-error'),
  })
</script>