Rn_ui_dropdown NPM

rn_ui_dropdown

rn_ui_dropdown is a customizable dropdown component for React Native that allows you to easily add a dropdown menu with options, selection handling, and dynamic rendering. It provides both single-select and multi-select modes

Usage

Single-select

import RnUiDropdown from 'rn_ui_dropdown';

const [selectedLocId, setSelectedLocId] = useState < any > null;
const locationList = [
  {value: 1, label: 'Delhi'},
  {value: 2, label: 'Mumbai'},
  {value: 3, label: 'Bengaluru'},
  {value: 4, label: 'Goa'},
  {value: 5, label: 'Chennai'},
  {value: 6, label: 'Jaipur'},
  {value: 7, label: 'Hyderabad'},
];

<RnUiDropdown
  multiSelect={false}
  options={locationList}
  bindingProp={'value'}
  displayProp={'label'}
  selectedOption={selectedLocId}
  onSelectionChange={(val: any) => setSelectedLocId(val)}
/>;

Multi-select

import RnUiDropdown from 'rn_ui_dropdown';

const [selectedLocId, setSelectedLocId] = useState < any > [];
const locationList = [
  {value: 1, label: 'Delhi'},
  {value: 2, label: 'Mumbai'},
  {value: 3, label: 'Bengaluru'},
  {value: 4, label: 'Goa'},
  {value: 5, label: 'Chennai'},
  {value: 6, label: 'Jaipur'},
  {value: 7, label: 'Hyderabad'},
];

<RnUiDropdown
  multiSelect={true}
  options={locationList}
  bindingProp={'value'}
  displayProp={'label'}
  selectedOption={selectedLocId}
  onSelectionChange={(val: any) => setSelectedLocId(val)}
/>;

Single-select Screenshots

Multi-select Screenshots

Properties

options: any[]

The list/array of object where every object represents an option.

selectedOption: any

The variable/state which contains the selected option.

multiSelect: boolean

Boolean to switch to single-select/multi-select mode. In case of single-select, pass single value (null for default) in selectedOption. And for multi-select, pass array in selectedOption ([] for default).