react-simple-phone-input 4.6.8 → 5.0.1

package/README.md

@@ -1,17 +1,19 @@
 React Simple Phone Input
 ==========
 
-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 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.
 
 [![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)
 
-- SSR Fiendly
+- SSR Friendly
 - Customizable
 - Multi Design
-- Search country
+- Search Country
+- Smallest Bundle Size (About 98kb)
+- Typescript support
 
 ## Installation
 
@@ -19,16 +21,16 @@ A simple and customizable react phone number dropdown component. It can mixed up
 $ npm i react-simple-phone-input --save
 ```
 
-## Installation
+## Usage
 
 ```jsx
-import { PhoneInput } from "react-simple-phone-input";
+import { PhoneInput, PhoneInputResponseType } from "react-simple-phone-input";
 import "react-simple-phone-input/dist/style.css";
 
 <PhoneInput
     country="US"
     placeholder="Add your phone"
-    onChange={(data) => console.log(data)}
+    onChange={(data: PhoneInputResponseType) => console.log(data)}
 />
 ```
 #### [See Demo](https://react-simple-phone-input.vercel.app/)
@@ -69,7 +71,7 @@ import "react-simple-phone-input/dist/style.css";
     <td> ReactNode </td>
     <td> Dropdown Icon component for changing default icon </td>
     <td> optional </td>
-    <td><code> &lt;Icon icon=&quot;icon-name&quot; /&gt; </cpde></td>
+    <td><code> &lt;Icon icon=&quot;icon-name&quot; /&gt; </code></td>
   </tr>
   
    <tr>
@@ -117,7 +119,7 @@ import "react-simple-phone-input/dist/style.css";
     <td> ReactNode </td>
     <td> If <code>search</code> enabled, custom search icon to show on search bar </td>
     <td> optional </td>
-    <td><code> &lt;Icon icon=&quot;icon-name&quot; /&gt; </cpde></td>
+    <td><code> &lt;Icon icon=&quot;icon-name&quot; /&gt; </code></td>
   </tr>
   
   <tr>
@@ -165,6 +167,16 @@ import "react-simple-phone-input/dist/style.css";
     <td> true </td>
     <td> Show or Hide search icon </td>
   </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>
 
 ## Event
@@ -177,11 +189,120 @@ import "react-simple-phone-input/dist/style.css";
   </tr>
   <tr>
     <td> onChange </td>
-    <td> To get the value from component </td>
-    <td> <code>onChange={(data: string) => console.log(data)}</code> </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>
+  </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
 - Code style changes not allowed
 - Do not create issues about incorrect or missing country data

package/dist/esm/index.css

@@ -0,0 +1,162 @@
+.simple-phone-input-sri198-container {
+    position: relative;
+}
+
+.simple-phone-input-sri198-container:focus,
+.simple-phone-input-sri198-container:focus-visible,
+.simple-phone-input-sri198-container:focus-within {
+    outline: none;
+}
+
+.simple-phone-input-sri198-main {
+    display: flex;
+    border: 1px solid rgb(203 203 203);
+    user-select: none;
+    border-radius: 3px;
+}
+
+.simple-phone-input-sri198-dropdown-container {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    background: rgb(231 231 231);
+    border-right: 1px solid rgb(203 203 203);
+}
+
+.simple-phone-input-sri198-dropdown-container img {
+    margin-right: 6px;
+}
+
+.simple-phone-input-sri198-dropdown {
+    background: white;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    top: 110%;
+    left: 0;
+    right: 0;
+    height: 250px;
+    overflow-y: auto;
+    box-shadow: 0px 4px 15px rgb(163 163 163);
+    border-radius: 3px;
+    transition: 0.3s ease;
+    transform: translateY(-5px);
+    opacity: 0;
+    visibility: hidden;
+}
+
+.simple-phone-input-sri198-dropdown.active {
+    transform: translateY(0px);
+    opacity: 1;
+    visibility: visible;
+}
+
+.simple-phone-input-sri198-dropdown li {
+    margin: 3px 0;
+    padding: 3px 8px;
+    display: flex;
+}
+
+.simple-phone-input-sri198-dropdown li.active {
+    background: rgba(0, 0, 0, 0.116);
+}
+
+.simple-phone-input-sri198-dropdown li:hover {
+    background: rgba(0, 0, 0, 0.116);
+}
+
+.simple-phone-input-sri198-dropdown li img {
+    margin-right: 6px;
+}
+
+.simple-phone-input-sri198-dropdown-container-button {
+    display: flex;
+    flex: 1;
+    width: 92px;
+    padding: 7px 2px 7px 7px;
+    align-items: center;
+}
+
+.simple-phone-input-sri198-dropdown-container-button.dial {
+    width: unset;
+    padding: 8px 3px 8px 8px;
+}
+
+.simple-phone-input-sri198-dropdown-text {
+    font-size: 15px;
+    flex: 1;
+    margin-top: 3px;
+}
+
+.simple-phone-input-sri198-dropdown-country-code {
+    opacity: 0.6;
+    margin-top: 3px;
+}
+
+.simple-phone-input-sri198-dropdown-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.simple-phone-input-sri198-dropdown-icon svg {
+    transition: 0.3s ease;
+}
+
+.simple-phone-input-sri198-dropdown-icon.active svg {
+    transform: rotate(-180deg)
+}
+
+.simple-phone-input-sri198-selected-code {
+    flex: 1;
+    font-size: 14px;
+    margin-top: 2px;
+}
+
+.simple-phone-input-sri198-input {
+    width: 100%;
+    border: none;
+    padding: 0 10px;
+}
+
+.simple-phone-input-sri198-input:focus {
+    outline: none;
+}
+
+.simple-phone-input-sri198-search-container {
+    padding: 5px;
+    position: relative;
+}
+
+.simple-phone-input-sri198-search-container input {
+    border: 1px solid rgba(0, 0, 0, 0.116);
+    padding: 8px 10px;
+    width: 100%;
+    font-size: 15px;
+    border-radius: 2px;
+}
+
+.simple-phone-input-sri198-search-icon {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    pointer-events: none;
+}
+
+.simple-phone-input-sri198-search-icon svg {
+    font-size: 20px;
+}
+
+.simple-phone-input-sri198-not-found {
+    text-align: center;
+    margin-top: 10px;
+    font-size: 15px;
+    color: #f73131;
+}
+
+.simple-phone-input-sri198-search-container input:focus {
+    outline: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-phone-input",
-  "version": "4.6.8",
+  "version": "5.0.1",
   "description": "A simple react phone input component with calling code dropdown🤷",
   "homepage": "https://react-simple-phone-input.vercel.app",
   "main": "dist/cjs/index.js",