React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications.
The React.js Blueprint Collapsible List Component is used to show a certain number of items and wraps the rest in a dropdown that cannot fit. The visible items get recomputed when there is resize of the component. It provides a better user interface.
React.js Blueprint Props:
- className: It is a space-delimited list of class names to pass along to a child element.
- collapseFrom: It denotes the direction in which the items should collapse.
- alwaysRenderOverflow: It is a boolean value. It denotes whether to always call overflowRenderer or not.
- items: List of items to show.
- minVisibleItems: It denotes the minimum number of items to be visible.
- observeParents: It is a boolean value. It denotes whether the parent DOM elements of the container will be observed or not.
- onOverflow: A void callback function that gets invoked when the overflowed items change.
- overflowRenderer: A callback to invoke to render the overflowed items.
- style: The CSS properties.
- tagName: HTML tag name.
- visibleItemRenderer: A callback to render each visible item.
Syntax:
<OverflowList> ... </OverflowList >
Prerequisite: Introduction and Installation reactJS.
Creating React Application and Module installation:
Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd project
Step 3: Now install the dependency by using the following command:
npm install @blueprintjs/core
Project Structure: It will look like this.
Example 1: We are importing Breadcrumbs as OverflowList from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”.
We are creating an array named data with some sample data. We are adding the OverflowList Component and passing the data array to the items prop.
import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css' ;
import { Breadcrumbs as OverflowList } from "@blueprintjs/core" ;
function App() {
const data = [
{ text: "Login" },
{ text: "User" },
{ text: "Articles" },
{ text: "Jobs" },
{ text: "contest" },
{ text: "Algorithms" },
{ text: "LogOut" },
];
return (
<div style={{
margin: 30
}}>
<h3>
ReactJS Blueprint OverflowList Component Props
</h3>
<OverflowList
items={data}
/>
</div >
);
} export default App;
|
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Example 2: We are importing Boundary, Breadcrumbs as OverflowList, and Classes from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”.
To the OverflowList Component, we are further adding the className, tagName and collapseFrom props.
App.js
import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css' ;
import { Boundary, Breadcrumbs as OverflowList, Classes } from "@blueprintjs/core" ;
function App() {
const data = [
{ text: "Login" },
{ text: "User" },
{ text: "Articles" },
{ text: "Jobs" },
{ text: "contest" },
{ text: "Algorithms" },
{ text: "LogOut" },
];
return (
<div style={{
margin: 30
}}>
<h3>ReactJS Blueprint OverflowList Component Props</h3>
<OverflowList
items={data}
className={Classes.ELEVATION_4}
tagName= "span"
collapseFrom={Boundary.END}
/>
</div >
);
} export default App;
|
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Reference: https://blueprintjs.com/docs/#core/components/overflow-list.props