@rn-components-dropdown/dropdown 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +118 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
# @rn-components-dropdown/dropdown
|
|
2
|
+
|
|
3
|
+
A lightweight and customizable dropdown component for React Native. Includes a flexible `Dropdown` component and a simple `AppText` component.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 🚀 Installation
|
|
8
|
+
|
|
9
|
+
Install the package using npm or yarn:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @rn-components-dropdown/dropdown
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
or
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
yarn add @rn-components-dropdown/dropdown
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## 📦 Importing Components
|
|
24
|
+
|
|
25
|
+
```js
|
|
26
|
+
import { Dropdown, AppText } from '@rn-components-dropdown/dropdown';
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## 🧩 Usage Example
|
|
32
|
+
|
|
33
|
+
```jsx
|
|
34
|
+
import React, { useState } from 'react';
|
|
35
|
+
import { View } from 'react-native';
|
|
36
|
+
import { Dropdown, AppText } from '@rn-components-dropdown/dropdown';
|
|
37
|
+
|
|
38
|
+
export default function App() {
|
|
39
|
+
const [value, setValue] = useState(null);
|
|
40
|
+
|
|
41
|
+
const data = [
|
|
42
|
+
{ label: 'Apple', value: 1 },
|
|
43
|
+
{ label: 'Banana', value: 2 },
|
|
44
|
+
{ label: 'Mango', value: 3 },
|
|
45
|
+
];
|
|
46
|
+
|
|
47
|
+
return (
|
|
48
|
+
<View style={{ padding: 20 }}>
|
|
49
|
+
<AppText>Choose a fruit:</AppText>
|
|
50
|
+
|
|
51
|
+
<Dropdown
|
|
52
|
+
data={data}
|
|
53
|
+
labelField="label"
|
|
54
|
+
valueField="value"
|
|
55
|
+
value={value}
|
|
56
|
+
onChange={(item) => setValue(item.value)}
|
|
57
|
+
placeholder="Select item"
|
|
58
|
+
/>
|
|
59
|
+
</View>
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
## 🛠️ Dropdown Props
|
|
67
|
+
|
|
68
|
+
| Prop | Type | Default | Description |
|
|
69
|
+
| --------------- | ---------- | --------------- | ----------------------------------------------------- |
|
|
70
|
+
| `data` | `array` | `[]` | The list of options for the dropdown. |
|
|
71
|
+
| `labelField` | `string` | `'label'` | The key in each data object for displaying the label. |
|
|
72
|
+
| `valueField` | `string` | `'value'` | The key used as the selected value. |
|
|
73
|
+
| `value` | `any` | `null` | The selected value. |
|
|
74
|
+
| `placeholder` | `string` | `'Select item'` | Placeholder text. |
|
|
75
|
+
| `onChange` | `function` | `() => {}` | Callback when a value is selected. |
|
|
76
|
+
| `style` | `object` | `{}` | Custom style for the dropdown container. |
|
|
77
|
+
| `textStyle` | `object` | `{}` | Custom style for the selected text. |
|
|
78
|
+
| `dropdownStyle` | `object` | `{}` | Style for the dropdown list. |
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
## ✨ Features
|
|
83
|
+
|
|
84
|
+
* Fully customizable dropdown UI
|
|
85
|
+
* Simple API
|
|
86
|
+
* Works with any React Native project
|
|
87
|
+
* Includes reusable `AppText` component
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
## 📄 AppText Component
|
|
92
|
+
|
|
93
|
+
A simple wrapper around the standard `Text` component.
|
|
94
|
+
|
|
95
|
+
### Usage
|
|
96
|
+
|
|
97
|
+
```jsx
|
|
98
|
+
<AppText style={{ fontSize: 18 }}>Hello World</AppText>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### Props
|
|
102
|
+
|
|
103
|
+
| Prop | Type | Description | |
|
|
104
|
+
| ---------- | -------- | -------------- | ---------------------- |
|
|
105
|
+
| `children` | `string | ReactNode` | Text content to render |
|
|
106
|
+
| `style` | `object` | Custom styling | |
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
## 📚 Contributing
|
|
111
|
+
|
|
112
|
+
Pull requests are welcome! If you want to improve the package, create an issue or PR.
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## 🪪 License
|
|
117
|
+
|
|
118
|
+
MIT © 2025 @rn-components-dropdown
|