# dj-intl-phone-input

> It is an international phone component.

Latest version **1.2.6** (published 2022-09-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install dj-intl-phone-input
pnpm add dj-intl-phone-input
yarn add dj-intl-phone-input
bun add dj-intl-phone-input
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.6 |
| Published | 2022-09-22 |
| First published | 2021-10-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 696.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Deepak Jaglan |
| Maintainers | djintalkalan |
| Keywords | react-native, react-component, react-native-component, react, react native, mobile, ios, android, intl, international, phone, input, component, mask, masked |

## Links

- npm: https://www.npmjs.com/package/dj-intl-phone-input
- Repository: https://github.com/djintalkalan/React-Native-INTL-Phone-Input
- Homepage: https://github.com/djintalkalan/React-Native-INTL-Phone-Input#readme
- Issues: https://github.com/djintalkalan/React-Native-INTL-Phone-Input/issues
- npm.io page: https://npm.io/package/dj-intl-phone-input

## Dependencies (1)

- [libphonenumber-js](https://npm.io/package/libphonenumber-js.md) ^1.10.13

## Alternatives

- [messageformat](https://npm.io/package/messageformat.md) — 329.7K weekly downloads
- [@mintlify/scraping](https://npm.io/package/@mintlify/scraping.md) — 294.8K weekly downloads
- [@mintlify/previewing](https://npm.io/package/@mintlify/previewing.md) — 209.5K weekly downloads
- [@mintlify/prebuild](https://npm.io/package/@mintlify/prebuild.md) — 209.5K weekly downloads
- [@mintlify/link-rot](https://npm.io/package/@mintlify/link-rot.md) — 206.3K weekly downloads

## Recent versions

- 1.2.6 (latest) — 2022-09-22
- 1.2.5 — 2022-04-29
- 1.2.4 — 2022-04-12
- 1.2.3 — 2022-04-11
- 1.2.2 — 2022-04-11
- 1.2.1 — 2022-04-11
- 1.2.0 — 2022-04-08
- 1.1.8 — 2022-04-08
- 1.1.7 — 2022-04-07
- 1.1.6 — 2022-04-07
- 1.1.5 — 2022-04-07
- 1.1.4 — 2022-04-06
- 1.1.3 — 2022-04-04
- 1.1.2 — 2022-04-04
- 1.1.1 — 2022-02-24
- … 3 more at https://npm.io/package/dj-intl-phone-input/versions

## README

# dj-intl-phone-input
It's an international phone input with phone mask.

This library is forked from React-Native-INTL-Phone-Input

![](mgif.gif)


# USAGE

install npm library
```
yarn add dj-intl-phone-input
```


İmport library
```
import IntlPhoneInput from 'dj-intl-phone-input';
```
use component
```
  onChangeText = ({dialCode, unmaskedPhoneNumber, phoneNumber, isVerified}) => {
    console.log(dialCode, unmaskedPhoneNumber, phoneNumber, isVerified);
  };
  render() {
    return (
      <SafeAreaView>
        <IntlPhoneInput onChangeText={this.onChangeText} defaultCountry="TR" renderAction={() => <Text>XX</Text>} />
      </SafeAreaView>
    );
  }
```



Custom Modal Example
```
 renderCustomModal=(modalVisible, countries, onCountryChange) => (
    <Modal visible={modalVisible}>
      <SafeAreaView style={{ flex: 1 }}>
        <View>
          <View>
            <TextInput placeholder="Search" />
            <Text>🔍</Text>
          </View>
          <FlatList
            style={{ flex: 1 }}
            data={countries}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item }) => (
              <TouchableWithoutFeedback onPress={() => onCountryChange(item.code)}>
                <Text>{item['your language code here for example tr']}</Text>
              </TouchableWithoutFeedback>
            )}
          />
        </View>
        <TouchableOpacity onPress={() => this.phoneInput.hideModal()}>
          <Text>CLOSE</Text>
        </TouchableOpacity>
      </SafeAreaView>
    </Modal>
  )

  render(){
    return <IntlPhoneInput
        ref={(ref) => this.phoneInput = ref}
        customModal={this.renderCustomModal}
        defaultCountry="TR"
        lang="TR"
      />;
  }

```



Supported Languages |  |
--- | --- |
TR | Turkish |
LT | Lithuanian |
EN | English |
RU | Russian |



prop names |type |default value | comment 
--- | --- | --- | --- 
lang | String |  | Translate country name on modal
placeholder | String |  | This prop change the phone input placeholder
defaultCountry | String | TR | You can change your default country code 
mask | String |  | You can set custom mask
onChangeText | Function |  | This function works when input text is changed 
customModal | Function |  | Generate your custom modal
phoneInputStyle | Style |  | This prop is about the text field's ReactNative.TextInput style 
containerStyle | Style |  | This prop is about the text field's container style 
dialCodeTextStyle | Style |  |  
flagStyle | Style |  |  
modalContainer | Style |  | This prop is about the modal field's SafeAreaView style.
filterInputStyle | Style |  | This prop is about the top of model filter text style 
closeButtonStyle | Style |  | This prop is about text style of bottom modal
modalCountryItemCountryNameStyle | Style |  |  
filterText | String | Filter | This is the text of placeholder input of top modal 
closeText | String | CLOSE | This prop is about the text of bottom modal 
disableCountryChange | Bool | false | This prop is about disable open select country modal
renderAction | Function |  | This prop attaching a component right of phone input
placeholderTextColor | String | black | This prop allows you to assign a color to the placeholderText

---
_Source: https://npm.io/package/dj-intl-phone-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._