MultiSelect

Sample Usage

<MultiSelect

  //required
  data={data}
  onSelect={console.log}

  //optional
  defaultValue={data}
  listHeight={300}
  placeholderText='Hello!'
  boxStyle={{
    backgroundColor: '#48c',
  }}
  boxTextStyle={{
    fontFamily: 'times new roman',
  }}
  boxTextHighlightStyle={{
    backgroundColor: 'darkgreen',
  }}
  listStyle={{
    backgroundColor: '#abc',
  }}
  listTextStyle={{
    color: 'brown',
    fontFamily: 'times new roman',
  }}
  selectedItemStyle={{
    backgroundColor: 'green',
  }}
  dropdownArrowColor='darkgreen'
  clearButtonStyle={{
    backgroundColor: 'darkgreen',
  }}
  clearButtonIconColor='#abc'

/>

Required Props

These props are required to be utilized for the selector to function.

data

Type: Data[]

The items the user will be able to select from.

onSelect

Type: Function (data: Data[]) => void

The function that is called when the user selects an item from the Selector.

Optional Props

These props are not required, but may add functionality that can be helpful.

onRemove

Type: Function (data: Data[]) => void

Default value: undefined

The function that is called when the user deselects an item from the Selector.

defaultValue

Type: Data[]
Default value: undefined

A group of items that are selected before the user interacts with the Selector.

disabled

Type: boolean
Default value: false

A boolean representing if the user is unable to interact with the Selector.

listHeight

Type: number
Default value: 200

The height of the dropdown list.

placeholderText

Type: string | React.JSX.Element
Default value: 'Click me'

The Selector text displayed when no items have been selected.

searchable

Type: boolean
Default value: false

A boolean representing if there should be a search bar for the Selector.

boxStyle

Type: ViewStyle
Default value:

{
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'flex-start',
  alignItems: 'center',
  alignContent: 'space-between',
  paddingVertical: 4,
  paddingLeft: 8,
  paddingRight: 24,
  borderWidth: 0.5,
  margin: 5,
  overflow: 'hidden',
  flexWrap: 'wrap',
}

Custom styles for the main Selector box.

boxTextStyle

Type: TextStyle
Default value:

{
  fontSize: 16,
  overflow: 'hidden',
  marginVertical: 4,
}

Custom styles for the text inside the main Selector box.

boxTextHighlightStyle

Type: ViewStyle
Default value:

{
  paddingHorizontal: 8,
  paddingVertical: 2,
  borderRadius: 12,
  marginRight: 6,
  marginVertical: 2,
}

Custom styles for the text highlight inside the main Selector box.

listStyle

Type: ViewStyle
Default value:

{
  position: 'absolute',
  borderWidth: 0.5,
  overflow: 'hidden',
}

Custom styles for the Selector dropdown list.

listTextStyle

Type: TextStyle
Default value:

{
  fontSize: 16,
  paddingLeft: 8,
}

Custom styles for the text inside the Selector dropdown list.

selectedItemStyle

Type: TextStyle
Default value:

{
  fontWeight: 'bold',
}

Custom styles for the active item inside the Selector dropdown list.

dropdownArrowColor

Type: ColorValue
Default value: black or white for dark mode

Custom color for the dropdown arrow inside the main Selector box.

clearButtonStyle

Type: ViewStyle
Default value:

{
  width: 40,
  height: 40,
  position: 'absolute',
  borderWidth: 0.5,
  borderRadius: 8,
  right: 5,
}

Custom color for the clear button.

clearButtonIconColor

Type: ColorValue
Default value: black or white for dark mode

Custom color for the icon inside the clear button.

searchBoxStyle

Type: TextStyle & ViewStyle
Default value:

{
  paddingHorizontal: 8,
  height: 40,
  borderWidth: 1,
  margin: 8,
}

Cystom styles for the Selector search box.

theme

Type: 'light' | 'dark' | 'system'
Default value: 'system'

The theme of the application.