Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-simple-phone-input

Package Overview
Dependencies
Maintainers
1
Versions
85
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 5.1.1 to 5.1.2

2

package.json
{
"name": "react-simple-phone-input",
"version": "5.1.1",
"version": "5.1.2",
"description": "A simple react phone input component with calling code dropdown🤷",

@@ -5,0 +5,0 @@ "homepage": "https://react-simple-phone-input.vercel.app",

145

README.md
React Simple Phone Input
==========
A simple and customizable react phone number dropdown component. It can mix up with your designed theme and give a fluent vibe able dropdown area in your next project.
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.

@@ -11,8 +11,6 @@ [![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)

- SSR Friendly
- SSR Fiendly
- Customizable
- Multi Design
- Search Country
- Smallest Bundle Size (About 98kb)
- Typescript support
- Search country

@@ -25,6 +23,6 @@ ## Installation

## Usage
## Installation
```jsx
import { PhoneInput, PhoneInputResponseType } from "react-simple-phone-input";
import { PhoneInput } from "react-simple-phone-input";
import "react-simple-phone-input/dist/style.css";

@@ -35,3 +33,3 @@

placeholder="Add your phone"
onChange={(data: PhoneInputResponseType) => console.log(data)}
onChange={(data) => console.log(data)}
/>

@@ -77,3 +75,3 @@ ```

<td> optional </td>
<td><code> &lt;Icon icon=&quot;icon-name&quot; /&gt; </code></td>
<td><code> &lt;Icon icon=&quot;icon-name&quot; /&gt; </cpde></td>
</tr>

@@ -126,3 +124,3 @@

<td> optional </td>
<td><code> &lt;Icon icon=&quot;icon-name&quot; /&gt; </code></td>
<td><code> &lt;Icon icon=&quot;icon-name&quot; /&gt; </cpde></td>
</tr>

@@ -175,12 +173,2 @@

</tr>
<tr>
<td> disableDropdownOnly </td>
<td> false </td>
<td> Disable dropdown menu list </td>
</tr>
<tr>
<td> disableInput </td>
<td> false </td>
<td> Disable input field </td>
</tr>
</table>

@@ -198,116 +186,7 @@

<td> onChange </td>
<td> To get the value from component. You get following field
<ul>
<li><code>country</code></li>
<li><code>code</code></li>
<li><code>dialCode</code></li>
<li><code>value</code></li>
<li><code>valueWithoutPlus</code></li>
</ul>
</td>
<td> <code>onChange={(data: PhoneInputResponseType) => console.log(data)}</code> </td>
<td> To get the value from component </td>
<td> <code>onChange={(data: string) => console.log(data)}</code> </td>
</tr>
</table>
## ClassName
<table>
<tr>
<th> Name </th>
<th> Type </th>
<th> Description </th>
</tr>
<tr>
<td> containerClass </td>
<td> string </td>
<td> class name for container </td>
</tr>
<tr>
<td> buttonClass </td>
<td> string </td>
<td> class name for dropdown button </td>
</tr>
<tr>
<td> dropdownClass </td>
<td> string </td>
<td> class name for dropdown area/menu </td>
</tr>
<tr>
<td> dropdownListClass </td>
<td> string </td>
<td> class name for dropdown list </td>
</tr>
<tr>
<td> dropdownIconClass </td>
<td> string </td>
<td> class name for dropdown icon </td>
</tr><tr>
<td> searchContainerClass </td>
<td> string </td>
<td> class name for search bar container </td>
</tr>
<tr>
<td> searchInputClass </td>
<td> string </td>
<td> class name for search input field </td>
</tr>
<tr>
<td> searchIconClass </td>
<td> string </td>
<td> class name for search icon </td>
</tr>
<tr>
<td> inputClass </td>
<td> string </td>
<td> class name for search icon </td>
</tr>
</table>
## Customize styles
<table>
<tr>
<th> Name </th>
<th> Description </th>
</tr>
<tr>
<td> containerStyle </td>
<td> phone Input Container style </td>
</tr>
<tr>
<td> buttonStyle </td>
<td> style for dropdown button </td>
</tr>
<tr>
<td> dropdownStyle </td>
<td> style for dropdown menu/area </td>
</tr>
<tr>
<td> dropdownListStyle </td>
<td> style for dropdown list </td>
</tr>
<tr>
<td> dropdownIconStyle </td>
<td> style for dropdown icon </td>
</tr>
<tr>
<td> searchContainerStyle </td>
<td> search container style </td>
</tr>
<tr>
<td> searchInputStyle </td>
<td> search input field style </td>
</tr>
<tr>
<td> searchIconStyle </td>
<td> search icon style </td>
</tr>
<tr>
<td> inputStyle </td>
<td> input field style </td>
</tr>
</table>
`note:` version 5 released. see the [changelogs](https://github.com/siamahnaf198/react-simple-phone-input/releases/tag/v5.0.0)
## Contributing

@@ -325,6 +204,6 @@ - Code style changes not allowed

- Twitter - [https://twitter.com/siamahnaf198](https://twitter.com/siamahnaf198)
- Github - [https://github.com/siamahnaf](https://github.com/siamahnaf)
- Github - [https://github.com/siamahnaf198](https://github.com/siamahnaf198)
## License
[![MIT licensed](https://cdn.jsdelivr.net/gh/siamahnaf/react-simple-phone-input@main/assets/license.svg)](LICENSE)
[![MIT licensed](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/license.svg)](LICENSE)
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc