1.0.6 • Published 3 years ago

@redmin_delishaj/react-native-select v1.0.6

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

��# rect-native-select

react-native-select is a highly customizable dropdownlist for android and ios.

Insallation

npm install @redmin_delishaj/react-native-select

Basic Usage

import Select, { SelectItem } from '@redmin_delishaj/react-native-select';

const data: SelectItem[] = [
  { text: 'Option 1', value: 1 },
  { text: 'Option 2', value: 2 },
  { text: 'Option 3', value: 3 },
];

const App = () => {

  const [selectedItem, setSelectedItem] = useState<any>();

  return (
      <Select
        data={data}
        onSelect={value => setSelectedItem(value)}
        value={selectedItem}
      />
  );
};

Basic Config

import Select, { SelectConfig, SelectItem } from '@redmin_delishaj/react-native-select';

const data: SelectItem[] = [
  { text: 'Option 1', value: 1 },
  { text: 'Option 2', value: 2 },
  { text: 'Option 3', value: 3 },
]

const App = () => {

  const [selectedItem, setSelectedItem] = useState<any>();

  const config: SelectConfig = {
    fontSize: 18,
    backgroundColor: '#404040',
    textColor: 'white',
    selectedBackgroundColor: 'white',
    selectedTextColor: 'black',
    selectedFontWeight: 'bold',
  }

  return (
    <Select
      data={data}
      onSelect={value => setSelectedItem(value)}
      value={selectedItem}
      config={config}
    />
  );
};

Props

NameDescriptionDetails
dataDropdown optionsSelectItem[]
valueSelected itemany
onSelectCallback which returns the valuefunction(value?: any) => void
onClickCallback when the textbox is clickedfunction() => void
isVisibleManually controlls the dropdown visibilityDon't use it if you wnat to the component to handle the visibility automiticallyboolean
isDisabledDisable the dropdownboolean
searchEnable searchboolean
placeholderPlaceholder textstring
searchPlaceholderSearch placeholder textstring
noDataTextText that is displayed when there is no datastring
spacingSpace between textbox and dropdownboolean
widthThe width of the whole componentnumber, string
dropdownHeightThe maximum height of the dropdownnumber
zIndexComponent z indexnumber
configContains props for quick stylingSelectConfig

Style Props

NameDescriptionDetails
textBoxStyleTextbox styleStyleProp\<ViewStyle>
textBoxTextStyleTextbox text styleStyleProp\<TextStyle>
dropdownStyleDropdown styleStyleProp\<ViewStyle>
optionTextStyleOption text styleStyleProp\<ViewStyle>
selectedBackgroundStyleBackground style of the selected itemStyleProp\<ViewStyle>
selectedTextStyleText style of the selected itemStyleProp\<ViewStyle>
searchStyleSearch styleStyleProp\<ViewStyle>

Custom Component Props

NameDescriptionDetails
caretIconIcon displayed when the dropdown is closed() => JSX.Element
clearIconIcon displayed when the dropdown is open() => JSX.Element
noDataComponentComponent that will be displayed when there is no data() => JSX.Element

Types

SelectItem

NameDescriptionDetails
textSelect option text that will be displayedstring
valueThe value of the Select itemany

Config

NameDescriptionDetails
backgroundColorBackground color for both textbox and dropdownstring
textColorText color for both textbox and dropdownstring
fontSizeFont size of all text on this componentnumber
fontFamilyFont family of all text on this componentstring
fontWeightFont weight of all text on this component"normal", "bold","100", "200", "300","400", "500", "600","700", "800", "900"
selectedBackgroundColorBackground color of the selected itemstring
selectedTextColorText color of the selected itemstring
selectedFontFamilyFont family of the selected itemstring
selectedFontWeightFont weight of the selected item"normal", "bold","100", "200", "300","400", "500", "600","700", "800", "900"
placeholderTextColorText color of textbox and search placeholderstring
disabledTextColorText color of textbox when this component is disabledstring
borderWidthBorder width of both textbox and dropdownnumber
borderColorBorder color of both textbox and dropdownstring
borderRadiusBorder radius of both textbox and dropdownnumber
1.0.2

3 years ago

1.0.1

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.0

3 years ago