searchable-dropdown-react-native
Version:
A searchable dropdown in React Native.
102 lines (89 loc) • 3.77 kB
Markdown
# Searchable Dropdown React Native
Searchable Dropdown in react native, usable with Expo.
Allow you to handle single and multiple selections.
## Screenshots
## Installation
```bash
npm install --save searchable-dropdown-react-native
```
## Properties
| Name | Description | Type | Default | Required |
| ---------------------- | ---------------------------------------------------------------- | -------- | ---------------- | -------- |
| **`options`** | The options for the component. | `array` | | Yes |
| `selectedValues` | The values currently selected. | `array` | | Yes |
| `setSelectedValues` | The callback to handle the selection of items | `func` | | Yes |
| `label` | The label of the dropdown | `string` | | No |
| `placeholder` | Default text to be shown to the user | `string` | 'Select an item' | No |
| `inputSize` | Size of the input. | `number` | `150` | No |
| `addNewElementText` | The text that will be shown to add a new element is the options. | `string` | `Add an item` | No |
| `rightIcon` | The icon on the right of the input (if you want one). | `any` | | No |
| `selectedElementColor` | Color of the selected items. | `string` | | No |
| `labelStyle` | Additional styles for the label. | `object` | `{}` | No |
| `containerStyle` | Additional styles for the container view. | `object` | `{}` | No |
| `itemStyle` | Additional styles for the items. | `object` | `{}` | No |
| `labelStyle` | Additional styles for the labels. | `object` | `{}` | No |
| `inputContainerStyle` | Additional styles for the input container. | `object` | `{}` | No |
| `inputColor` | The color of the input. | `string` | | No |
# Example
```jsx
import React, { useState } from "react";
import SearchableDropdown from "searchable-dropdown-react-native";
let items = [
{
id: 1,
name: "JavaScript",
value: "JavaScript"
},
{
id: 2,
name: "Java",
value: "Java"
},
{
id: 3,
name: "Ruby",
value: "Ruby"
},
{
id: 4,
name: "React Native",
value: "React Native"
},
{
id: 5,
name: "PHP",
value: "PHP"
},
{
id: 6,
name: "Python",
value: "Python"
},
{
id: 7,
name: "Go",
value: "Go"
},
{
id: 8,
name: "Swift",
value: "Swift"
}
];
export default function App() {
const [selectedValues, setSelectedValues] = useState([]);
return (
<SearchableDropdown
options={items}
selectedValues={selectedValues}
setSelectedValues={setSelectedValues}
label="test dropdown"
placeholder="Test placeholder"
inputSize={300}
/>
);
}
```