@gilbarbara/react-dropdown

@gilbarbara/react-dropdown

Flexible dropdown component with search, create, and multi selection. It uses emotion for styling.

Check out the demo.

Highlights

• 🏖 Easy to use: Just set the options prop.
• 🛠 Flexible: Personalize the options to fit your needs.
• 🚀 Customizable: You can use your own components to complete control the UI.
• 🟦 Typescript: Nicely typed

Installation

npm i @gilbarbara/react-dropdown

Usage

import Dropdown from '@gilbarbara/react-dropdown';

function App() {
  const options = [
    {
      label: "Alister Chilles",
      value: "achilleso",
    },
    {
      label: "Alyosha Keerl",
      value: "akeerl6",
    },
  ];
  
  return <Dropdown options={options} />;
}

API

The only required props is options.

Base props

Prop	Type	Default	Description
autoFocus	boolean	true	Focus the input when the menu opens. (if searchable is true)
className	string		A custom class name for the Dropdown root.
clearOnClose	boolean	true	Clear the input when the menu closes.
clearOnSelect	boolean	true	Clear the input when an item is selected.
closeOnScroll	boolean	false	Close the menu when the user scrolls.
closeOnSelect	boolean	false	Close the menu when an item is selected.
comparatorFn	(previousValues: Option[], values: Option[]) => boolean		Overrides the internal comparator function.
create	boolean	false	Create an option from the search string if no results are found. (Fires the onCreate callback)
direction	Direction	'ltr'	The text direction of the component.
disabled	boolean	false	Disable the Dropdown.
hiddenInput	HiddenInput		Add an input with type hidden to the component with the selected value(s).
hideHandle	boolean	false	Hide the handle.
keepSelectedInList	boolean	true	Keep the selected item(s) in the list.
labels	Partial<Labels>		Component labels.
loading	boolean	false	Show a spinner while loading data.
menuPosition	Position	'bottom'	The menu position.
multi	boolean	false	Select multiple options.
open	boolean		Control the menu visibility.
options (required)	Option[]		The dropdown options.
placeholder	string	'Select...'	The placeholder of the input.
searchBy	OptionKeys	'label'	The field to search.
searchFn	(props: ComponentProps) => Option[]		Overrides the internal search function.
searchable	boolean	true	Search the options.
secondaryPlaceholder	string		The placeholder on the search field if a value is selected (if searchable is true).
showClearButton	boolean	false	Show a button to clear the selection.
showSeparator	boolean	False	Show a separator between the content and handle.
style	CSSProperties		Set the style on the component root.
styles	Partial<Styles>		The styling of the component. (color, background, border, etc.)
values	Option[]		The selected values.

Callback props

Prop	Type	Description
onChange	(value: Option[]) => void	Values change callback.
onClearAll	() => void	Clear all values callback (with custom components).
onClickSelector	(isOpen: boolean) => void	Click selector callback.
onClose	() => void	Close dropdown callback.
onCreate	(search: string, close: () => void) => void	Create option callback.
onOpen	() => void	Open dropdown callback.
onSelectAll	() => void	Select all values callback (with custom components).

Custom components

Prop	Type	Description
clearComponent	(props: ComponentProps) => JSX.Element	Custom Clear component.
contentComponent	(props: ComponentProps) => JSX.Element	Custom Content component.
handleComponent	(props: ComponentProps) => JSX.Element	Custom Handle component.
inputComponent	(props: InputComponentProps) => JSX.Element	Custom Input component.
loaderComponent	(props: Pick<ComponentProps, 'props'>) => JSX.Element	Custom Loader component.
menuComponent	(props: ComponentProps) => JSX.Element	Custom Menu component.
menuItemComponent	(props: ItemComponentProps) => JSX.Element	Custom MenuItem component.
noDataComponent	(props: ComponentProps) => JSX.Element	Custom NoData component.
optionComponent	(props: OptionComponentProps) => JSX.Element	Custom Option component.
separatorComponent	(props: ComponentProps) => JSX.Element	Custom Separator component.

*All the types are available here.

Credits

Inspired by react-dropdown-select and react-select.

License

MIT