# React phone number input

A phone field formatted based on the user's location.

By Nikolay. Categories: framework, interface, language, use-case.

[Demo](https://form-react-phone-number-input.preview.croct.live) · [Deploy](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcroct-tech%2Fvercel-template&project-name=form-react-phone-number-input&repository-name=form-react-phone-number-input&demo-title=React+phone+number+input&demo-description=A+phone+field+formatted+based+on+the+user%27s+location.&demo-image=https%3A%2F%2Fcdn.croct.io%2Fassets%2Ftemplates%2Fcovers%2Finterface-form-react-phone-number-input.png&external-id=npm%3A%2F%2Freact-phone-number-input&integration-ids=oac_cTQZ22CIXn5XgZXYk2nBwFdU&demo-url=https%3A%2F%2Fform-react-phone-number-input.preview.croct.live) · [Source](https://github.com/croct-tech/templates/blob/master/templates/npm/react-phone-number-input/)

## Installation

```sh
npx croct@latest use npm://react-phone-number-input
```

# Introduction

This template adds an international phone input field component to your project using [
`react-phone-number-input`](https://github.com/catamphetamine/react-phone-number-input?utm_source=croct), enhanced with
**location detection** via the **Croct Evaluation API**.

The field automatically detects the user's location based on the user's IP and sets the appropriate country code and
formatting.

Built with [Next.js](https://nextjs.org/?utm_source=croct) and fully integrated with Croct, this phone input template is
ideal for forms and signup flows that require seamless **international phone number handling** and **geo-personalized
experiences**.

## Usage

To create a new project using this template, run:

```croct-cmd
croct use npm://react-phone-number-input
```

You can customize the template by specifying options:

```croct-cmd
croct use npm://react-phone-number-input --router=page
```

## Options

The following options are available for this template:

| Option        | Description                                      | Required | Default  |
|---------------|--------------------------------------------------|----------|----------|
| `projectName` | The name of the project.                         | No       | `my-app` |
| `version`     | The Next.js version to use.                      | No       | `latest` |
| `router`      | The router to use (`app` or `page`).             | No       | `app`    |
| `javascript`  | Whether to use JavaScript instead of TypeScript. | No       | `false`  |