searchable-dropdown-react-native

A searchable dropdown in React Native.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
searchable-dropdown-react-native
411.0.2a year ago3 years agoMinified + gzip package size for searchable-dropdown-react-native in KB

Readme

Searchable Dropdown React Native
Searchable Dropdown in react native, usable with Expo. Allow you to handle single and multiple selections.

Screenshots

first third second

Installation

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
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}
    />
  );
}