1.0.6 • Published 3 years ago
@redmin_delishaj/react-native-select v1.0.6
��# 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
Name | Description | Details |
---|---|---|
data | Dropdown options | SelectItem[] |
value | Selected item | any |
onSelect | Callback which returns the value | function(value?: any) => void |
onClick | Callback when the textbox is clicked | function() => void |
isVisible | Manually controlls the dropdown visibilityDon't use it if you wnat to the component to handle the visibility automitically | boolean |
isDisabled | Disable the dropdown | boolean |
search | Enable search | boolean |
placeholder | Placeholder text | string |
searchPlaceholder | Search placeholder text | string |
noDataText | Text that is displayed when there is no data | string |
spacing | Space between textbox and dropdown | boolean |
width | The width of the whole component | number, string |
dropdownHeight | The maximum height of the dropdown | number |
zIndex | Component z index | number |
config | Contains props for quick styling | SelectConfig |
Style Props
Name | Description | Details |
---|---|---|
textBoxStyle | Textbox style | StyleProp\<ViewStyle> |
textBoxTextStyle | Textbox text style | StyleProp\<TextStyle> |
dropdownStyle | Dropdown style | StyleProp\<ViewStyle> |
optionTextStyle | Option text style | StyleProp\<ViewStyle> |
selectedBackgroundStyle | Background style of the selected item | StyleProp\<ViewStyle> |
selectedTextStyle | Text style of the selected item | StyleProp\<ViewStyle> |
searchStyle | Search style | StyleProp\<ViewStyle> |
Custom Component Props
Name | Description | Details |
---|---|---|
caretIcon | Icon displayed when the dropdown is closed | () => JSX.Element |
clearIcon | Icon displayed when the dropdown is open | () => JSX.Element |
noDataComponent | Component that will be displayed when there is no data | () => JSX.Element |
Types
SelectItem
Name | Description | Details |
---|---|---|
text | Select option text that will be displayed | string |
value | The value of the Select item | any |
Config
Name | Description | Details |
---|---|---|
backgroundColor | Background color for both textbox and dropdown | string |
textColor | Text color for both textbox and dropdown | string |
fontSize | Font size of all text on this component | number |
fontFamily | Font family of all text on this component | string |
fontWeight | Font weight of all text on this component | "normal", "bold","100", "200", "300","400", "500", "600","700", "800", "900" |
selectedBackgroundColor | Background color of the selected item | string |
selectedTextColor | Text color of the selected item | string |
selectedFontFamily | Font family of the selected item | string |
selectedFontWeight | Font weight of the selected item | "normal", "bold","100", "200", "300","400", "500", "600","700", "800", "900" |
placeholderTextColor | Text color of textbox and search placeholder | string |
disabledTextColor | Text color of textbox when this component is disabled | string |
borderWidth | Border width of both textbox and dropdown | number |
borderColor | Border color of both textbox and dropdown | string |
borderRadius | Border radius of both textbox and dropdown | number |