React.js Blueprint Overflow list Components Props

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