Skip to content

Commit aecb1db

Browse files
mmusaibmmusaib
authored
Documentation Added
1 parent 630a887 commit aecb1db

File tree

4 files changed

+153
-5
lines changed

4 files changed

+153
-5
lines changed

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023 mmusaib
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
| | | | | |
2+
| --------------------------------------- | -------- | ---------- |---------- |---------- |
3+
| <a href="https://www.npmjs.com/package/react-native-dropdown-country-picker">![NPM VERSION](https://img.shields.io/npm/v/react-native-dropdown-country-picker?style=for-the-badge)</a> | <a href="https://www.npmjs.com/package/react-native-dropdown-country-picker">![NPM WEEKLY DOWNLOADS](https://img.shields.io/npm/dw/react-native-dropdown-country-picker?color=%232CA215&label=WEEKLY%20DOWNLOADS&style=for-the-badge)</a> | <a href="https://github.com/mmusaib/react-native-dropdown-country-picker/stargazers">![GITHUB STAR](https://img.shields.io/github/stars/mmusaib/react-native-dropdown-country-picker?label=Give%20Us%20A%20Star&style=for-the-badge)</a> | <a href="https://www.youtube.com/channel/UCSwIR2KBHiqiProH3Me8IZQ">![YOUTUBE VIEWS](https://img.shields.io/youtube/channel/views/UCSwIR2KBHiqiProH3Me8IZQ?label=YOUTUBE%20VIEWS&style=for-the-badge)</a> | <a href="https://www.npmjs.com/package/react-native-dropdown-country-picker">![NPM LIFETIME DOWNLOADS](https://img.shields.io/npm/dt/react-native-dropdown-country-picker?color=%232CA215&style=for-the-badge)</a>
4+
5+
<h1 align="center">
6+
🏳️‍🌈 React Native Dropdown Country Picker
7+
</h1>
8+
9+
<div align="center">
10+
11+
🟢 React Native Dropdown Country Picker Similar as HTML Select List. It's not a modal.
12+
13+
<a href="https://twitter.com/_mmusaib" target="_blank">
14+
<img src="https://i.imgur.com/IGTvb2x.gif" width="250" />
15+
</a>
16+
</div>
17+
18+
19+
20+
<h4>Light Weight and <b>Robust</b> Country Picker So Far.</h4>
21+
22+
- Equivalent to React Native Stock Component
23+
- Use the styles of your choice
24+
- Search the countries seamlessly
25+
- Option to add customizable input mobile field next to the Picker
26+
- Zero dependencies
27+
28+
29+
30+
# Compatibility
31+
32+
33+
| iOS | Android | Web | Expo |
34+
--------|---------|-----|------|
35+
| ✅ | ✅ | ✅ | ✅ |
36+
37+
38+
39+
40+
# 🔌 Installation
41+
42+
```sh
43+
$ npm install react-native-dropdown-country-picker
44+
45+
```
46+
47+
OR
48+
49+
```sh
50+
$ yarn add react-native-dropdown-country-picker
51+
```
52+
53+
54+
# 😎 Displaying the country picker
55+
```jsx
56+
import CountryCodeDropdownPicker from 'react-native-dropdown-country-picker'
57+
58+
const App = () => {
59+
const [selected, setSelected] = React.useState('+91');
60+
const [country, setCountry] = React.useState('');
61+
const [phone, setPhone] = React.useState('');
62+
63+
return(
64+
<CountryCodeDropdownPicker
65+
selected={selected}
66+
setSelected={setSelected}
67+
setCountryDetails={setCountry}
68+
phone={phone}
69+
setPhone={setPhone}
70+
countryCodeTextStyles={{fontSize: 13}}
71+
/>
72+
)
73+
74+
};
75+
```
76+
77+
78+
79+
For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-dropdown-country-picker)
80+
81+
# ⭐ Props for the component
82+
| Name | Type | Description | Default |
83+
| ---- | ---- | ----------- | ----------- |
84+
| selected | state var | The default selected country dial code stored in state variable | N/A
85+
| setSelected | Function | setState function to set the selected state variable | N/A
86+
| setCountryDetails | Function | setState function to set additional country details in respective state variable (Optional) | N/A
87+
| phone | state var | state variable if you want to display phone number field (Optional) | N/A
88+
| setPhone | Funtion | setState function to set the phone state variable (Optional) | N/A
89+
| countryCodeContainerStyles | style Object | style object to style the country code container (Optional) | N/A
90+
| countryCodeTextStyles | style object | style object to style the text inside country code container (Optional) | N/A
91+
| phoneStyles | style object | style object to style the text input of phone field (Optional) | N/A
92+
| searchIcon | string | URL of the icon if you want to replace the search icon (Optional) | N/A
93+
| closeIcon | string | URL of the icon if you want to replace the close icon (Optional) | N/A
94+
| searchStyles | style object | style object to style the search input field (Optional) | N/A
95+
| dropdownStyles | style object | style object to style the dropdown container (Optional) | N/A
96+
| dropdownTextStyles | style object | style object to style the text inside dropdown container (Optional) | N/A
97+
98+
99+
100+
101+
102+
103+
<!-- # ▶️ Watch Tutorial Video -->
104+
105+
<!-- [![Watch video](https://i.imgur.com/IAxLuSA.png)](https://youtu.be/eNCsP_YhGBk&t=15s) -->
106+
107+
108+
<!-- For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-stock-star-rating) -->
109+
110+
111+
112+
113+
114+
115+
116+
117+

‎index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ interface CountryCodeProps {
6060
}
6161

6262

63-
const CountryCodeSelectList: React.FC<CountryCodeProps> = ({
63+
const CountryCodeDropdownPicker: React.FC<CountryCodeProps> = ({
6464
selected,
6565
setSelected,
6666
setCountryDetails= () => {},
@@ -204,7 +204,7 @@ const CountryCodeSelectList: React.FC<CountryCodeProps> = ({
204204
}
205205

206206

207-
export default CountryCodeSelectList;
207+
export default CountryCodeDropdownPicker;
208208

209209
const styles = StyleSheet.create({
210210
row: {

‎package.json

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "react-native-dropdown-country-picker",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"description": "React Native Dropdown Country Picker is same as that of HTML select list",
5-
"main": "index.js",
5+
"main": "index.tsx",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1"
88
},
@@ -12,7 +12,17 @@
1212
},
1313
"keywords": [
1414
"expo",
15-
"reactnative"
15+
"reactnative",
16+
"react native",
17+
"easy",
18+
"react-native",
19+
"react-native-dropdown",
20+
"reatct native easy dropdown picker",
21+
"react native dropdown country picker",
22+
"easy country picker",
23+
"expo country picker",
24+
"expo dropdown country picker",
25+
"expo picker"
1626
],
1727
"author": "Muhammad Musaib",
1828
"license": "MIT",

0 commit comments

Comments
 (0)