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.
Javascript
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
Javascript
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
