Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.
In this article, we’ll discuss the React.js Blueprint Select Props interface. The select component displays a list of items to choose one item and item children are wrapped in a MenuItem that contains the list and an optional InputGroup to filter the items.
React.js BluePrint Select Props:
- activeItem: It denotes the currently active item that is used for keyboard interactions.
- children– It denotes the element which triggers the select popover.
- 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: It helps in creating a selectable Create Item option from the current query string.
- disabled: It specifies whether the component will be disabled or interactive.
- fill: It determines whether the component should take up the full width of its container.
- filterable– It determines whether the dropdown list can be filtered.
- initialContent: It denotes the default React component that renders when the query string is empty.
- inputProps– It denotes the props that are used to spread to the query InputGroup.
- 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.
- matchTargetWidth: It determines whether the select popover should be styled so that it matches the width of the target.
- 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.
- popoverContentProps– It denotes the props that are used to spread to the Popover2 content wrapper element.
- popoverProps: It denotes the props to spread to Popover.
- query: It denotes the query string passed to itemListPredicate or itemPredicate to filter items.
- resetOnClose– It determines whether the active item should be reset to the first matching item when the popover closes.
- 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.
Syntax:
<Select
items={ITEM}
itemPredicate={filterData}
...
>
<Button>
</Select>Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npm create-react-app appname
Step 2: After creating your project folder i.e. appname, move to it using the following command:
cd appname
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:
Step 5: Run the project as follows:
npm start
Example 1: The below example demonstrates the usage of items, selectedItems, itemRenderer, and onItemSelect props of the select component.
Javascript
import React, { useState } from "react";
import { Button, MenuItem } from "@blueprintjs/core";
import { Select } from "@blueprintjs/select";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/select/lib/css/blueprint-select.css";
function App() {
const [item, setItem] = useState("Java");
const [items, setItems] = useState([]);
return (
<center>
<div style={{ textAlign: "center", color: "green" }}>
<h1>GeeksforGeek</h1>
<h2>ReactJs Blueprint Select Props Interface</h2>
</div>
<Select
items={["Java", "Python", "C++", "SQL", "JavaScript"]}
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={setItem}
>
<Button text={item} rightIcon="caret-down" />
</Select>
</center>
);
} export default App;
|
Output:
Example 2: Below is another example that demonstrates the usage of disabled and fill props of the select component.
Javascript
import React, { useState } from "react";
import { Button, MenuItem } from "@blueprintjs/core";
import { Select } from "@blueprintjs/select";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/select/lib/css/blueprint-select.css";
function App() {
const [item, setItem] = useState("Java");
const [items, setItems] = useState([]);
return (
<center>
<div style={{ textAlign: "center", color: "green" }}>
<h1>GeeksforGeek</h1>
<h2>ReactJs Blueprint Select Props Interface</h2>
</div>
<Select
items={["Java", "Python", "C++", "SQL", "JavaScript"]}
selectedItems={items}
disabled={true}
fill={true}
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={setItem}
>
<Button text={item} rightIcon="caret-down" />
</Select>
</center>
);
} export default App;
|
Output:
Reference: https://blueprintjs.com/docs/#select/select-component