npm-native-dropdown

The npm-native-dropdown package provides a versatile and customizable dropdown component for React applications. With this package, you can easily integrate dropdown menus into your UI, offering users a seamless way to select options from a list.

Badges

Installation

Install my-project with npm

  npm install npm-native-dropdown
  cd my-project

or

  yarn add npm-native-dropdown
  cd my-project

Features

• Easy to use
• Single or Multiselect option for items
• Responsive for Cross platform
• Have wast option for customization
• Implemented with typescript

Screenshots

Array example -

  const options = [
    "Heart",
    "Thumbs Up",
    "Star",
    "Smiley",
  ];

npm Import -

import DropdownMenu from 'npm-native-dropdown';

Usage/Examples 1 - Simple

      <DropdownMenu
        placeHolder={selected ? selected : 'Select Option'}
        options={options}
        onSelect={(selectedItem: string, index: number) => {
          console.log('>>>', selectedItem, index);
        }}
      />

Usage/Examples 2 - With renderitem and renderButton

      <DropdownMenu
        options={options}
        onSelect={(selectedItem: string, index: number) => {
          console.log('>>>', selectedItem, index);
        }}
        renderButton={(buttonRef, toggleMenu) => {
          return (
            <TouchableOpacity style={[$button]} ref={buttonRef} onPress={toggleMenu}>
              <Text>{selected ? selected : 'Select'}</Text>
            </TouchableOpacity>
          )
        }}
        renderItem={(setIsMenuOpen: () => any) => {
          return options.map((option, index) => {
            return (<TouchableOpacity
              key={index}
              onPress={() => {setIsMenuOpen(),setSelected(option)}}
              style={[$menuItem(options?.length === index + 1)]}
            >
              <Text style={[$textStyle]}>{option} </Text>
            </TouchableOpacity>)
          })
        }}
      />
      
const $menuItem = (isLast: boolean): ViewStyle => ({
  padding: 12,
  flex: 1,
  paddingVertical: 8,
  width: 200,
  borderBottomWidth: isLast ? 0 : 0.5,
  borderColor: 'gray',
  alignItems: 'center'
})

const $textStyle: TextStyle = {
  fontSize: 16,
  fontWeight: '400',
  color: 'green'
}

const $button: TextStyle = {
  backgroundColor: '#e1ecf7',
  height: 44,
  width: 200,
  borderColor: '#71a5de',
  borderWidth: 1,
  borderRadius: 4,
  alignItems: 'center',
  justifyContent: 'center',
}

Usage/Examples 3 - With Icons

(Note - You can use any JSX.Element)

      <DropdownMenu
        placeHolder={selected ? selected : 'Select Option'}
        options={options}
        onSelect={(selectedItem: string, index: number) => {
          console.log('>>>', selectedItem, index);
        }}
        leftRenderIcon={
          <Image
            style={$tinyLogo}
            source={{
              uri: 'https://image.png',
            }}
          />
        }
        rightRenderIcon={
          <Image
            style={$tinyLogo}
            source={{
              uri: 'https://image.png',
            }}
          />
        }
      />

const $tinyLogo: ImageStyle = {
  width: 20,
  height: 20,
}

API Reference

Props

| Props | Params | isRequire | Description | | :-------- | :------- | :--------- | :------------------------- | | options | string[] | Yes | Plain array containing dropdown options.| | rightRenderIcon | ReactElement | No | Custom component to be used as the dropdown icon.| | placeHolder | string | No | Placeholder text when no option is selected.| | onSelect | (option: string, index: number) => void | Yes | function recieves selected item and its index in data array| | disabled | boolean | No | disable dropdown| | buttonStyle | ViewStyle | No | style object for dropdown Button.| | placeHolderTextStyle | TextStyle | No | style object for dropdown placeholder Text.| | contentStyle | ViewStyle | No | style object for dropdown content.| | menuItemStyle | ViewStyle | No | style object for dropdown menu items.| | optionStyle | TextStyle | No | style object for dropdown options.| | leftRenderIcon | JSX.Element | No | Custom component to be used as the dropdown icon.| | renderItem | JSX.Element | No | React component for each dropdown item.| | renderButton | JSX.Element | No | React component for the dropdown button.| | dropDownWidth | number | No | dropdown width.|

Author

• @VijayPalsawdiya

License

MIT