rn-multipicker
This package will provide features to select and search multiple dropdown items gracefully
RNMultiSelect
RNMultiSelect.Sectioned
Please refer for full documentation.
Installation
npm install rn-multipicker
or
yarn add rn-multipicker
Usage
import { RNMultiSelect } from 'rn-multipicker';
import { COUNTRIES, SECTIONED_COUNTRIES } from './constants';
// ...
const App() {
const [selectedItems, setSelectedItems] = useState<string[]>([]);
return (
<View style={{flex: 1}}>
<RNMultiSelect
placeholder="Countries"
data={COUNTRIES}
onSelectedItemsChange={(value) => setSelectedItems(value)}
selectedItems={selectedItems}
/>
<View style={{ height: 22 }} />
<RNMultiSelect.Sectioned
placeholder="Sectioned Countries"
data={SECTIONED_COUNTRIES}
onSelectedItemsChange={(val) => setSelectedItems2(val)}
selectedItems={selectedItems2}
/>
</View>
);
}
RNMultiSelect API
Properties
Prop | Type | Description |
---|---|---|
placeholder |
string |
Placeholder text displayed in the multi-select input field. |
data |
string[] |
Array of strings representing selectable items. |
onSelectedItemsChange |
(selectedItems: string[]) => void |
Callback triggered when selected items change. |
selectedItems |
string[] |
Array of strings representing currently selected items. |
styles (deprecated) |
StyleProp<ViewStyle> |
Deprecated: Use inputStyle instead. |
renderCheckedItem |
(value: string, i: number) => JSX.Element |
Custom renderer for checked items. |
renderCheckBox |
(value: string, active: boolean, onCheck: (item: string) => void) => JSX.Element |
Custom renderer for checkboxes. |
searchBarStyle |
StyleProp<TextStyle> |
Styling for the search bar. |
clearButtonStyle |
StyleProp<ViewStyle> |
Styling for the clear button. |
saveButtonStyle |
StyleProp<ViewStyle> |
Styling for the save button. |
renderClearButton |
(onClearAll: () => void, disabled: boolean) => JSX.Element |
Custom renderer for the clear button. |
renderSaveButton |
(onApply: () => void, disabled: boolean) => JSX.Element |
Custom renderer for the save button. |
modalTitleStyle |
StyleProp<TextStyle> |
Styling for the picker modal title. |
searchBarPlaceholder |
string |
Placeholder text for the search bar. |
inputStyle |
StyleProp<ViewStyle> |
Styling for the input field. |
maxCheckedItemsVisible |
number |
Maximum number of checked items visible in the selection. |
renderViewMoreButton |
(showAll: () => void, remainingCount: number) => JSX.Element |
Custom renderer for "View More" button. |
renderViewLessButton |
(showLess: () => void) => JSX.Element |
Custom renderer for "View Less" button. |
checkedItemsColor |
string |
Change the background color of the checked items visible on the input box. |
checkedItemsContentColor |
string |
Change the color of the title and cross icon on the checked items visible on the input box. |
onSearchTextChange |
(searchText: string, setLoader: (value: boolean) => void) => void |
Callback function triggered when user enters search value. |
onEndReached |
(iteration: number, setLoader: (value: boolean) => void) => void |
Callback function triggered when user scrolls to the last item in the not selected list. This can be used to make dynamic fetch calls by pages. |
RNMultiSelect.Sectioned API
Can be used to display Multiple items with Section headers
Properties
Prop | Type | Description |
---|---|---|
data |
SectionedMultiSelectData[] |
Array of data representing sectioned items in the multi-picker. |
selectedItems |
SectionedSelectedItems[] |
Array of selected items with section information. |
onSelectedItemsChange |
(selectedItems: SectionedSelectedItems[]) => void |
Callback triggered when selected items change. |
renderCheckedItem |
(value: SectionedSelectedItems, onRemove: () => void, i: number) => JSX.Element |
Custom renderer for checked items in the picker. |
renderCheckBox |
(value: SectionedSelectedItems, active: boolean, onCheck: (item: SectionedSelectedItems) => void) => JSX.Element |
Custom renderer for checkboxes in the picker. |
placeholder |
string |
Placeholder text displayed in the multi-select input field. |
styles (deprecated) |
StyleProp<ViewStyle> |
Deprecated: Use inputStyle instead. |
searchBarStyle |
StyleProp<TextStyle> |
Styling for the search bar. |
clearButtonStyle |
StyleProp<ViewStyle> |
Styling for the clear button. |
saveButtonStyle |
StyleProp<ViewStyle> |
Styling for the save button. |
renderClearButton |
(onClearAll: () => void, disabled: boolean) => JSX.Element |
Custom renderer for the clear button. |
renderSaveButton |
(onApply: () => void, disabled: boolean) => JSX.Element |
Custom renderer for the save button. |
modalTitleStyle |
StyleProp<TextStyle> |
Styling for the picker modal title. |
searchBarPlaceholder |
string |
Placeholder text for the search bar. |
inputStyle |
StyleProp<ViewStyle> |
Styling for the input field. |
maxCheckedItemsVisible |
number |
Maximum number of checked items visible in the selection. |
renderViewMoreButton |
(showAll: () => void, remainingCount: number) => JSX.Element |
Custom renderer for "View More" button. |
renderViewLessButton |
(showLess: () => void) => JSX.Element |
Custom renderer for "View Less" button. |
checkedItemsColor |
string |
Change the color of the checked items visible on the input box. |
checkedItemsContentColor |
string |
Change the color of the title and cross icon on the checked items visible on the input box. |
renderSelectedSectionHeader |
string |
Custom renderer for Section title headers in the Selected item. |
renderNotSelectedSectionHeader |
string |
Custom renderer for Section title headers in the Not Selected items. |
onSearchTextChange |
(searchText: string, setLoader: (value: boolean) => void) => void |
Callback function triggered when user enters search value. |
onEndReached |
(iteration: number, setLoader: (value: boolean) => void) => void |
Callback function triggered when user scrolls to the last item in the not selected list. This can be used to make dynamic fetch calls by pages. |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
Feel free to dive in! Open an issue or submit PRs.
License
MIT