In this article, we will learn about the MultiSelect2 component offered by the blueprint.js library. BlueprintJS is a React-based UI toolkit for the web. It is written in Typescript. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications that run in a modern web browser.
MultiSelect2 component offered by BlueprintJS: MultiSelect2 component renders a UI that allows us to choose among multiple items from a list. It renders a TagInput component wrapped in a Popover2 component, both offered by BlueprintJS.
MultiSelect2 props:
- activeItem: It denotes the currently focused/active item which would be used for keyboard interactions.
- className: It denotes a list of class names to pass along to a child element.
- createNewItemFromQuery: It allows the creation of new items from the current query string provided.
- createNewItemPosition: It denotes the createNewItem position within the list, either first or last.
- createNewItemRenderer: With this, one can create a selectable Create Item option from the current query string.
- fill: It determines whether the component should take up the full width of its container.
- disabled: It specifies whether the component will be disabled or interactive.
- initialContent: It denotes the default React component that renders when the query string is empty.
- itemDisabled: It determines whether the given item is disabled.
- itemListPredicate: It is used to customize the querying of entire items array, passed as props.
- itemListRenderer: It is used to custom render the contents of the dropdown.
-
itemPredicate: It is used to customize the querying of individual items of the items array.
itemRenderer: It is used to custom render an item in the dropdown list. - items: It denotes the array of items in the list.
- itemsEqual: It is used in determining whether the two items are equal.
- noResults: It is used to render a React component when the filtering returns zero results.
- onActiveItemChange: It is a callback function that gets Invoked when user interaction changes the active item.
- onItemSelect: It is a callback function that gets invoked when an item from the list gets selected, typically by clicking or pressing the enter key.
- onItemsPaste: It is a callback function that gets invoked when multiple items get selected at once.
- onQueryChange: It is a callback function that gets invoked when the query string is changed.
- onRemove: It is a callback function that gets invoked when an item gets removed from the selection by removing its tag in the TagInput.
- openOnKeyDown: It determines whether the component should wait until a key down event in the TagInput before opening its popover.
- placeholder: It denotes the Input placeholder text.
- popoverProps: It denotes the props to spread to Popover.
- query: It denotes the query string passed to itemListPredicate or itemPredicate to filter items.
- resetOnQuery: It determines whether the active item should reset to the first matching item every time the query changes.
- resetOnSelect: It determines whether the active item should be reset to the first matching item when an item is selected.
- scrollToActiveItem: It determines whether the active item should always be scrolled into view when the prop changes.
- selectedItems: It denotes the list of controlled selected values.
- tagInputProps: It denotes the props to spread to TagInput.
- tagRenderer: It is used to transform an item into tag content.
- disabled: Whether the component is non-interactive.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: Use the following command to move to your project folder after creating it, i.e., foldername:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @blueprintjs/core npm install @blueprintjs/select
Project Structure: It will look like the following.
Example 1: Now write down the following code in the App.js file. Our default component, App, is where we have written our code in this case.
import './App.css';
import { MultiSelect2 } from "@blueprintjs/select";
import { MenuItem } from "@blueprintjs/core";
import "normalize.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/select/lib/css/blueprint-select.css";
import { useState } from 'react';
function App() {
const [item, setItem] = useState('A');
const [items, setItems] = useState([]);
return (
<div className="container" style={{ width: '30%' }}>
<MultiSelect2
activeItem={item}
items={["A", "B", "C"]}
selectedItems={items}
itemRenderer={(val, itemProps) => {
return (
<MenuItem
key={val}
text={val}
onClick={(elm) => {
setItem(elm.target.textContent)
setItems((items) => {
return [...items, elm.target.textContent]
})
}}
active={itemProps.modifiers.active}
/>
);
}}
onItemSelect={() => { }}
tagRenderer={(item) => item}
onRemove={(item) => {
setItems(items => items.filter(elm => elm !== item))
}}
onClear={() => setItems([])}
/>
</div>
);
} export default App;
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Example 2: In this example, let’s change the placeholder for search input. Change your App.js like the below:
import './App.css';
import { MultiSelect2 } from "@blueprintjs/select";
import { MenuItem } from "@blueprintjs/core";
import "normalize.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/select/lib/css/blueprint-select.css";
import { useState } from 'react';
function App() {
const [item, setItem] = useState('USA');
const [items, setItems] = useState([]);
return (
<div className="container" style={{ width: '30%' }}>
<MultiSelect2
tagInputProps={{ placeholder: 'Search for a country' }}
activeItem={item}
items={["India", "USA", "Canada"]}
selectedItems={items}
itemRenderer={(val, itemProps) => {
return (
<MenuItem
key={val}
text={val}
onClick={(elm) => {
setItem(elm.target.textContent)
setItems((items) => {
return [...items, elm.target.textContent]
})
}}
active={itemProps.modifiers.active}
/>
);
}}
onItemSelect={() => { }}
tagRenderer={(item) => item}
onRemove={(item) => {
setItems(items => items.filter(elm => elm !== item))
}}
onClear={() => setItems([])}
/>
</div>
);
} export default App;
|
Output:
Reference: https://blueprintjs.com/docs/#select/multi-select2