Single and Multi Select Dropdown Library.

Installation

1.Install the package via npm:

npm install @manishcodefire/codefire-dropdown

Code snippets:

2.Here's an example of how you can use the component

import {StyleSheet, View} from 'react-native';
import React from 'react';
import {SingleSelectDropdown} from '@manishcodefire/codefire-dropdown';

const App = () => {
const imageRoute1 = require('../../assets/openDropdown.png');
const imageRoute2 = require('../../assets/closeDropdown.png');
  const classes = [
    {id: '1', room: 'One'},
    {id: '2', room: 'Two'},
    {id: '3', room: 'Three'},
    {id: '4', room: 'Four'},
    {id: '5', room: 'Five'},
  ];

  return (
    <View style={styles.container}>
      <View style={{justifyContent: 'center', alignItems: 'center'}}>
        <SingleSelectDropdown
          items={classes}
          onSelectOption={e => console.log(e)}
          openDropdownImage={imageRoute1}
          closeDropdownImage={imageRoute2}
          width={'85%'}
          dropdownWidth={'85%'}
          borderWidth={1}
          borderColor={'#8e8e8e'}
          height={50}
          borderRadius={10}
          dropdownHeight={300}
          dropdownBg={'#ffffff'}
          dropdownBorderRadius={10}
          dropdownMarginTop={5}
          itemsBorderBottomWidth={1}
          itemHeight={50}
          itemsBorderBottomColor={'#e7e7e7'}
          itemTextColor={'#8e8e8e'}
          itemFontSize={15}
          backgroundColor={null}
        />
      </View>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {marginTop: 50, alignItems: 'center', width: '100%', flex: 1},
  heading: {color: '#000000', fontSize: 16, fontWeight: 'bold'},
});

Single Select Dropdown Props:

Props

| Props Name | Params | isRequire | Description | | ---------------------- | ------------ | --------- | ---------------------------------------------------- | | items | Array | Yes | The list of items to display in the dropdown. | | onSelectOption | Function | Yes | Callback function called when an option is selected. | | width | string | No | Width of the dropdown box | | borderWidth | Number | No | Border width of the dropdown box | | borderColor | String | No | Border color of the dropdown box | | height | Number | No | Height of the dropdown box | | borderRadius | Number | No | Border radius of the dropdown box | | dropdownHeight | Number | No | Height of the dropdown list | | dropdownBg | String | No | Background color of the dropdown list | | dropdownBorderRadius | Number | No | Border radius of the dropdown list | | dropdownMarginTop | Number | No | Margin top of the dropdown list | | itemsBorderBottomWidth | Number | No | Border bottom width of the dropdown list items | | itemHeight | Number | No | Height of each dropdown list item | | itemsBorderBottomColor | String | No | Border bottom color of the dropdown list items | | itemTextColor | String | No | Text color of the dropdown list items | | itemFontSize | Number | No | Font size of the dropdown list items | | backgroundColor | String | No | Background color of the dropdown box | | openDropdownImage | String(path) | No | Image for opening the dropdown | | closeDropdownImage | String(path) | No | Image for closing the dropdown |

Multi Select Dropdown Code snippets:

2.Here's an example of how you can use the component

import {StyleSheet, View} from 'react-native';
import React from 'react';
import {MultiSelectDropdown} from '@manishcodefire/codefire-dropdown';

const Dropdown = () => {
  const imageRoute1 = require('../../assets/openDropdown.png');
  const imageRoute2 = require('../../assets/closeDropdown.png');
  const classes = [
    {id: '1', name: 'One'},
    {id: '2', name: 'Two'},
    {id: '3', name: 'Three'},
    {id: '4', name: 'Four'},
    {id: '5', name: 'Five'},
    {id: '6', name: 'Six'},
    {id: '7', name: 'Seven'},
    {id: '8', name: 'Eight'},
    {id: '9', name: 'Nine'},
    {id: '10', name: 'Ten'},
    {id: '11', name: 'Eleven'},
    {id: '12', name: 'Twelve'},
  ];

  return (
    <View style={styles.container}>
      <MultiSelectDropdown
        items={classes}
        sorting={true}
        closeDropdownImage={imageRoute2}
        openDropdownImage={imageRoute1}
        onSelect={e => console.log(e)}
      />
    </View>
  );
};

export default Dropdown;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Multi Select Dropdown Props

| Props Name | Params | isRequire | Description | | ------------------------------ | ------------ | --------- | --------------------------------------------------------------- | | items | Object[] | Yes | The list of items to display in the dropdown. | | sorting | boolean | Yes | Flag indicating whether to sort the items alphabetically. | | onSelect | Function | Yes | Callback function called when items are selected. | | width | String | No | Width of the dropdown component | | inputBoxPadding | Number | No | Padding for the input box | | inputBoxBorderWidth | Number | No | Border width for the input box | | inputBoxBorderColor | String | No | Border color for the input box | | inputBoxBorderRadius | Number | No | Border radius for the input box | | placeholder | String | No | Placeholder text for the input box | | paceholderFontSize | Number | No | Font size for the placeholder text | | placeholderTextColor | String | No | Text color for the placeholder text | | selectedItemsBoxBg | String | No | Background color for the selected items box | | selectedItemsBoxPadding | Number | No | Padding for the selected items box | | selectedItemsBoxBorderRadius | Number | No | Border radius for the selected items box | | selectedItemsBoxMarginRight | Number | No | Margin right for the selected items box | | selectedItemsBoxMarginBottom | Number | No | Margin bottom for the selected items box | | selectedItemsFontSize | Number | No | Font size for the selected items text | | selectedItemsTextColor | String | No | Text color for the selected items text | | dropdownBorderWidth | Number | No | Border width for the dropdown list | | dropdownBorderColor | String | No | Border color for the dropdown list | | dropdownBorderRadius | Number | No | Border radius for the dropdown list | | dropdownBg | String | No | Background color for the dropdown list | | dropdownMaxHeight | Number | No | Maximum height for the dropdown list | | dropdownMarginTop | Number | No | Margin top for the dropdown list | | selectedItemsPadding | Number | No | Padding for the selected items in the dropdown list | | selectedItemsBottomBorder | Number | No | Bottom border width for the selected items in the dropdown list | | selectedItemsBottomBorderColor | String | No | Bottom border color for the selected items in the dropdown list | | selectedItemsTextSize | Number | No | Text size for the selected items in the dropdown list | | dropdownSelectedTextColor | String | No | Text color for the selected items in the dropdown list | | closeDropdownImage | String(path) | No | Image for closing the dropdown | | openDropdownImage | String(path) | No | Image for opening the dropdown |