react-simple-phone-input - npm Package Compare versions

Comparing version 5.1.2 to 5.1.3

package.json

		{
		"name": "react-simple-phone-input",
		"version": "5.1.2",
		"version": "5.1.3",
		"description": "A simple react phone input component with calling code dropdown🤷",
		@@ -5,0 +5,0 @@ "homepage": "https://react-simple-phone-input.vercel.app",

284

README.md

		@@ -1,191 +0,137 @@
		React Simple Phone Input
		Country Data Codes
		==========

		A simple and customizable react phone number dropdown component. It can mixed up with your designed theme and give a fluent vibeable dropdown area in your next project.
		A node js package to get country data including country name, code, currency information, emoji etc.

		[![npm version](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/npm-version.svg)](https://www.npmjs.com/package/react-simple-phone-input)
		[![npm downloads](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/downloads.svg)](https://www.npmjs.com/package/react-simple-phone-input)
		[![PRs Welcome](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/prs-welcome.svg)](https://github.com/siamahnaf198/react-simple-phone-input)
		[![MIT licensed](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/license.svg)](https://github.com/siamahnaf198/react-simple-phone-input/blob/main/LICENSE)
		## Introduction
		A simple but useful functional node packages with all country data. It includes all useful country data gives several function to complete your project.

		- SSR Fiendly
		- Customizable
		- Multi Design
		- Search country
		## Countries

		The data currently provided for each country is:

		* `id` The unique id number for the array
		* `name` The english name for the country
		* `isoAlpha2` The [ISO 3166-1 alpha 2](http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) code
		* `isoAlpha3` The [ISO 3166-1 alpha 3](http://en.wikipedia.org/wiki/ISO_3166-1_alpha-3) code
		* `isoNumeric` The [ISO 3166-1 numeric](https://en.wikipedia.org/wiki/ISO_3166-1_numeric)
		* `currency` An object with currency info.

		- `code` The [ISO 4217 currency codes](http://en.wikipedia.org/wiki/ISO_4217)
		- `name` The currency name
		- `symbol` The currency symbol

		* `flag` Country flag base64 data
		* `languages` An array of [ISO 639-2](http://en.wikipedia.org/wiki/ISO_639-2) codes for languages.
		* `countryCallingCodes` The international call prefixes for this country.
		* `emoji` The emoji of country's flag.

		## Installation

		```shell-script
		$ npm i react-simple-phone-input --save
		```bash
		$ npm i country-data-codes
		```
		```bash
		import { getCountryList } from "country-data-codes";
		or
		const { getCountryList } = require("country-data-codes")
		```
		Example
		```bash
		console.log(getCountryList()); //Returns all country list
		```

		## Installation
		## Methods
		### getCurrency(countryCode)
		Returns the country's currency info by providing country code.

		```jsx
		import { PhoneInput } from "react-simple-phone-input";
		import "react-simple-phone-input/dist/style.css";
		Example
		```bash
		import { getCurrency, GetCurrencyTypes } from "country-data-codes";

		<PhoneInput
		country="US"
		placeholder="Add your phone"
		onChange={(data) => console.log(data)}
		/>
		const currencyInfo: GetCurrencyTypes = getCurrency("BD"); // Here country code can be isoAlpha2 or isoAlpha3

		console.log(currencyInfo)
		```
		#### [See Demo](https://react-simple-phone-input.vercel.app/)
		Return values-
		* `name` currency name
		* `code` currency code
		* `symbol` currency symbol

		## Options
		<table width="100%">
		<tr>
		<th> Name </th>
		<th> Type </th>
		<th width="30%"> Description </th>
		<th> Is Required </th>
		<th> Example </th>
		</tr>
		<tr>
		<td> country </td>
		<td> string </td>
		<td> initial country </td>
		<td> required </td>
		<td> "BD" </td>
		</tr>
		<tr>
		<td> placeholder </td>
		<td> string </td>
		<td> Input Field Placeholder Text </td>
		<td> required </td>
		<td> <code>Type your phone number</code> </td>
		</tr>
		<tr>
		<td> value </td>
		<td> string </td>
		<td> Input field state value or default value </td>
		<td> optional </td>
		<td></td>
		</tr>

		<tr>
		<td> iconComponent </td>
		<td> ReactNode </td>
		<td> Dropdown Icon component for changing default icon </td>
		<td> optional </td>
		<td><code> <Icon icon="icon-name" /> </cpde></td>
		</tr>

		<tr>
		<td> inputProps </td>
		<td> InputHTMLAttributes </td>
		<td> Props to pass into the input field </td>
		<td> optional </td>
		<td> </td>
		</tr>
		### getCallingCode(countryCode)
		Returns the country's calling code. It returns an array of string.

		<tr>
		<td> onlyCountries </td>
		<td> array </td>
		<td> Show only country in dropdown menu with Country Codes </td>
		<td> optional </td>
		<td> ["BD", "US", "AF", "AL"] </td>
		</tr>

		<tr>
		<td> excludeCountries </td>
		<td> array </td>
		<td> If you want to remove some country to the list. If you give <code>excludeCountries</code> then <code>onlyCountries</code> not works </td>
		<td> optional </td>
		<td> ["AF", "AL"] </td>
		</tr>

		<tr>
		<td> preferredCountries </td>
		<td> array </td>
		<td> Country codes to show on the top of the dropdown menu </td>
		<td> optional </td>
		<td> ["BD", "US"] </td>
		</tr>
		Example
		```bash
		import { getCallingCode, GetCallingCodeTypes } from "country-data-codes";

		<tr>
		<td> searchPlaceholder </td>
		<td> string </td>
		<td> Search input field placeholder </td>
		<td>optional</td>
		<td></td>
		</tr>
		const dialingCode: GetCallingCodeTypes = getCallingCode("BD")

		<tr>
		<td> searchIconComponent </td>
		<td> ReactNode </td>
		<td> If <code>search</code> enabled, custom search icon to show on search bar </td>
		<td> optional </td>
		<td><code> <Icon icon="icon-name" /> </cpde></td>
		</tr>

		<tr>
		<td> searchProps </td>
		<td> InputHTMLAttributes </td>
		<td> Props to pass into the search input field </td>
		<td> optional </td>
		<td> </td>
		</tr>

		<tr>
		<td> searchNotFound </td>
		<td> string </td>
		<td> Error message when search result is empty! </td>
		<td> optional </td>
		<td> </td>
		</tr>
		</table>
		console.log(dialingCode) // Give the country code(isoAlpha2 or isoAlpha3)
		//{
		code: "880",
		format: "+880",
		flag: "" //Base64 flash data
		}
		```
		### getLanguages(countryCode)
		Returns the country's languages. It returns an array of string;

		## Other Options
		Example
		```bash
		import { getLanguages } from "country-data-codes";

		<table>
		<tr>
		<th> Name </th>
		<th> Default </th>
		<th> Description </th>
		</tr>
		<tr>
		<td> showDropdownIcon </td>
		<td> true </td>
		<td> Show or Hide dropdown icon </td>
		</tr>
		<tr>
		<td> dialCodeInputField </td>
		<td> false </td>
		<td> Show calling code into into field or show beside country flag. For more, see <a href="https://react-simple-phone-input.vercel.app/">example</a> </td>
		</tr>
		<tr>
		<td> search </td>
		<td> true </td>
		<td> Show or Hide search input field </td>
		</tr>
		<tr>
		<td> showSearchIcon </td>
		<td> true </td>
		<td> Show or Hide search icon </td>
		</tr>
		</table>
		console.log(getLanguages("BD")) // Give the country code(isoAlpha2 or isoAlpha3)
		//["ben"]
		```

		## Event
		### getFlagBase64(countryCode)
		Returns the country's flag image as base64 data

		<table>
		<tr>
		<th> Event Name </th>
		<th> Description </th>
		<th> Example </th>
		</tr>
		<tr>
		<td> onChange </td>
		<td> To get the value from component </td>
		<td> <code>onChange={(data: string) => console.log(data)}</code> </td>
		</tr>
		</table>
		Example
		```bash
		import { getFlagBase64 } from "country-data-codes";

		## Contributing
		- Code style changes not allowed
		- Do not create issues about incorrect or missing country data
		const flag = getFlagBase64("BD") // Give the country code(isoAlpha2 or isoAlpha3)

		//<img src=`data:image/png;base64, ${flag}`/>
		```

		### lookup(query)
		You can search and find any country's data by any parameter, like-
		* by `name`: You can search and find data by country name
		* by `countryCode`: You can search and find data by country code
		* by `callingCode`: You can search and find data by country calling code
		* by `currencyName`: You can search and find data by country currency name
		* by `currencyCode`: You can search and find data by country currency code
		* by `currencySymbol`: You can search and find data by country currency symbol
		* by `isoNumeric`: You can search and find data by country iso numeric

		Example
		```bash
		import { lookup, CountryDataTypes } from "country-data-codes";

		const data: CountryDataTypes = lookup({name: "Bangladesh"})
		const data: CountryDataTypes = lookup({countryCode: "BD"})
		const data: CountryDataTypes = lookup({callingCode: "+880"})
		const data: CountryDataTypes = lookup({currencyName: "taka"})
		const data: CountryDataTypes = lookup({currencyCode: "BDT"})
		const data: CountryDataTypes = lookup({currencySymbol: "৳"})
		```

		### removeDialCode()
		You can remove dial code from a phone number and get a string value.

		Example
		```bash
		import { removeDialCode } from "country-data-codes";

		const phone = removeDialCode("+8801611994404")

		//undefined or
		//01611994403
		```

		## Issues or correction
		If you face any issues, missing data or wrong data about country, you are welcome to create an issue.
		If you face any issues to any function or see any wrong information about country, please let me know.

		@@ -197,6 +143,6 @@ ## Stay in touch
		- Twitter - [https://twitter.com/siamahnaf198](https://twitter.com/siamahnaf198)
		- Github - [https://github.com/siamahnaf198](https://github.com/siamahnaf198)
		- Github - [https://github.com/siamahnaf](https://github.com/siamahnaf)

		## License

		[![MIT licensed](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/license.svg)](LICENSE)
		country-data-codes [MIT licensed](LICENSE).

react-simple-phone-input - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics