@blueprintjs/select

What is @blueprintjs/select?

@blueprintjs/select is a package from the Blueprint.js library that provides a set of components for building complex and customizable select menus, dropdowns, and multi-select interfaces. It is designed to be highly flexible and integrates seamlessly with the rest of the Blueprint.js ecosystem.

What are @blueprintjs/select's main functionalities?

Single Select

This feature allows you to create a single select dropdown menu. The `Select` component is used to render a list of items, and the `MenuItem` component is used to display each item. The `onItemSelect` callback is triggered when an item is selected.

import { Select } from '@blueprintjs/select';
import { MenuItem } from '@blueprintjs/core';

const items = ["Apple", "Banana", "Cherry"];

const renderItem = (item, { handleClick, modifiers }) => (
  <MenuItem
    key={item}
    text={item}
    onClick={handleClick}
    active={modifiers.active}
  />
);

const SingleSelect = Select.ofType();

const App = () => (
  <SingleSelect
    items={items}
    itemRenderer={renderItem}
    onItemSelect={(item) => console.log(item)}
  >
    <button className="bp3-button bp3-icon-caret-down">Select an item</button>
  </SingleSelect>
);

Multi Select

This feature allows you to create a multi-select dropdown menu. The `MultiSelect` component is used to render a list of items, and the `MenuItem` component is used to display each item. The `onItemSelect` callback is triggered when an item is selected, and the `tagInputProps` is used to handle the removal of selected items.

import { MultiSelect } from '@blueprintjs/select';
import { MenuItem, Tag } from '@blueprintjs/core';

const items = ["Apple", "Banana", "Cherry"];

const renderItem = (item, { handleClick, modifiers }) => (
  <MenuItem
    key={item}
    text={item}
    onClick={handleClick}
    active={modifiers.active}
  />
);

const MultiSelectComponent = MultiSelect.ofType();

const App = () => {
  const [selectedItems, setSelectedItems] = React.useState([]);

  const handleItemSelect = (item) => {
    setSelectedItems([...selectedItems, item]);
  };

  const handleTagRemove = (item) => {
    setSelectedItems(selectedItems.filter(i => i !== item));
  };

  return (
    <MultiSelectComponent
      items={items}
      itemRenderer={renderItem}
      selectedItems={selectedItems}
      onItemSelect={handleItemSelect}
      tagRenderer={(item) => item}
      tagInputProps={{ onRemove: handleTagRemove }}
    />
  );
};

Custom Filtering

This feature allows you to implement custom filtering logic for the select menu. The `itemPredicate` prop is used to filter the list of items based on the user's input. In this example, the `filterItems` function filters items that include the query string.

import { Select } from '@blueprintjs/select';
import { MenuItem } from '@blueprintjs/core';

const items = ["Apple", "Banana", "Cherry"];

const renderItem = (item, { handleClick, modifiers }) => (
  <MenuItem
    key={item}
    text={item}
    onClick={handleClick}
    active={modifiers.active}
  />
);

const filterItems = (query, items) => {
  return items.filter(item => item.toLowerCase().includes(query.toLowerCase()));
};

const SingleSelect = Select.ofType();

const App = () => (
  <SingleSelect
    items={items}
    itemRenderer={renderItem}
    itemPredicate={filterItems}
    onItemSelect={(item) => console.log(item)}
  >
    <button className="bp3-button bp3-icon-caret-down">Select an item</button>
  </SingleSelect>
);

Other packages similar to @blueprintjs/select

react-select

react-select is a flexible and customizable select input control for React. It supports single and multi-select, async options, and customizable styles. Compared to @blueprintjs/select, react-select offers more out-of-the-box customization options and is widely used in the React community.

downshift

downshift is a library that provides primitives to build flexible and accessible dropdowns and select menus. It is highly customizable and allows developers to create their own select components from scratch. Compared to @blueprintjs/select, downshift offers more control over the rendering and behavior of the select components.

react-autosuggest

react-autosuggest is a library for building autocomplete and autosuggest input fields in React. It provides a highly customizable and accessible way to create suggestion dropdowns. Compared to @blueprintjs/select, react-autosuggest is more focused on providing suggestions as the user types, rather than general select menus.

README

Blueprint Select Components

Blueprint is a React UI toolkit for the web.

This package provides React components related to selecting items from a list:

• Select for selecting items in a list.
• Suggest for selecting items in a list, from a text input.
• MultiSelect for selecting multiple items in a list.
• Omnibar, a macOS spotlight-style typeahead component.
• QueryList, a higher-order component that provides interactions between a query string and a list of items.

Installation

npm install --save @blueprintjs/select

Full Documentation | Source Code