1.0.2 • Published 5 years ago

react-native-multiselect-dropdown-picker v1.0.2

Weekly downloads
9
License
ISC
Repository
-
Last release
5 years ago

React Native MultiSelect Dropdown


npm version platform support

A Multi Select Dropdown Picker component with searchable feature for react native which supports both Android & iOS. Easy to integrate and use. It can be bind to any data source.

Features :

  • No pre-defined format for data source. Can pass any type of data source.
  • Can display user-defined label in dropdown.
  • Ability to customize the component as per your need by changing the dropdown properties.
  • Search the data from the data source.
  • Works on both Android & iOS.

Demo :

Changelogs :

Installation :

npm install react-native-multiselect-dropdown-picker
                or
yarn add react-native-multiselect-dropdown-picker

Importing NPM Package :

import { MultiSelectDropdown } from 'react-native-multiselect-dropdown-picker'

Examples :

Properties :

PropTypeRequiredDescriptionDefault Value
containerStyleObjectOptionalAdditional styles for the container view. Used to adjust the outer part of the dropdown component. Refer Available props descriptions section for more details{}
styleObjectOptionalAdditional styles for the dropdown component. Used to adjust the inner part of the dropdown component. Refer Available props descriptions section for more details{}
dropDownStyleObjectOptionalAdditional styles for the dropdown box.Refer Available props descriptions section for more details{}
itemStyleObjectOptionalAdditional styles for the items.Refer Available props descriptions section for more details{}
labelStyleObjectOptionalAdditional styles for the labels.Refer Available props descriptions section for more details{}
dropDownLabelStyleObjectOptionalAdditional styles for the dropdown labels.Refer Available props descriptions section for more details{}
dataArray of Object(s)YesAn array of object(s) to be displayed in the dropdown.
selectedDataArray of Object(s)OptionalAn array of object(s) that has to be pre-selected in the dropdown.
onItemChangeCallback FunctionOptionalCallback which returns selected object(s). It returns an entire object of the selected items. (data,index) =>
checkBoxCheckedColorStringOptionalCheckbox color to be displayed when the item is selectedblack
checkBoxUncheckedColorStringOptionalCheckbox color to be displayed when the item is not/un selected.black
checkBoxSizeNumberOptionalSize of the checkbox22
dropDownMaxHeightNumberOptionalHeight of the dropdown box.250
zIndexNumberOptionalThis property specifies the stack order of the component.5000
searchableErrorMessageStringOptionalError text message to be displayedNo Records Found
multipleDataSelectedTextStringOptionalText message to be displayed when items are selected from the dropdown. %d denotes how many items are selected from the dropdown%d records have been selected
placeHolderStringOptionalDefault Text to be shown to the userSelect an option
displayLabelStringYesThe label to be displayed in the dropdown. The defined displayLabel should be present in data prop.

Available Props Description :


containerStyle :

PropTypeDescriptionDefault Value
widthNumber
heightNumber30
marginNumber
marginTopNumber
marginBottomNumber
marginLeftNumber
marginRightNumber

style :

PropTypeDescriptionDefault Value
borderLeftColorString#dfdfdf
borderRightColorString#dfdfdf
borderBottomColorString#dfdfdf
borderTopColorString#dfdfdf
borderWidthNumber1
borderTopWidthNumber
borderBottomWidthNumber
borderLeftWidthNumber
borderRightWidthNumber
backgroundColorString#fff
paddingHorizontalNunber10
paddingVerticalNumber5

dropDownStyle :

PropTypeDescriptionDefault Value
borderLeftColorString#dfdfdf
borderRightColorString#dfdfdf
borderBottomColorString#dfdfdf
borderTopColorString#dfdfdf
borderWidthNumber1
borderTopWidthNumber
borderBottomWidthNumber
borderLeftWidthNumber
borderRightWidthNumber
backgroundColorString#fff
paddingHorizontalNunber10
paddingVerticalNumber5

itemStyle :

PropTypeDescriptionDefault Value
paddingVertical8
width'100%'

labelStyle :

PropTypeDescriptionDefault Value
textShadowOffsetobject: {width: number,height: number}
colorString
fontSizeNumber
fontStyleenum('normal', 'italic')
fontWeightenum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
lineHeightNumber
textAlignenum('auto', 'left', 'right', 'center', 'justify')
textDecorationLineenum('none', 'underline', 'line-through', 'underline line-through')
textShadowColorString
fontFamilyString
textShadowRadiusNumber
includeFontPaddingBool
textAlignVerticalenum('auto', 'top', 'bottom', 'center')
fontVariantarray of enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')
letterSpacingNumber
textDecorationColorString
textDecorationStyleenum('solid', 'double', 'dotted', 'dashed')
textTransformenum('none', 'uppercase', 'lowercase', 'capitalize')
writingDirectionenum('auto', 'ltr', 'rtl')

dropDownLabelStyle :

PropTypeDescriptionDefault Value
textShadowOffsetobject: {width: number,height: number}
colorString
fontSizeNumber
fontStyleenum('normal', 'italic')
fontWeightenum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
lineHeightNumber
textAlignenum('auto', 'left', 'right', 'center', 'justify')
textDecorationLineenum('none', 'underline', 'line-through', 'underline line-through')
textShadowColorString
fontFamilyString
textShadowRadiusNumber
includeFontPaddingBool
textAlignVerticalenum('auto', 'top', 'bottom', 'center')
fontVariantarray of enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')
letterSpacingNumber
textDecorationColorString
textDecorationStyleenum('solid', 'double', 'dotted', 'dashed')
textTransformenum('none', 'uppercase', 'lowercase', 'capitalize')
writingDirectionenum('auto', 'ltr', 'rtl')