React.js Blueprint Collapsible list Component 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. 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.
• children: The content of the list.
• collapseFrom: It denotes the direction in which the items should collapse.
• dropdownProps: It denotes the props to pass to the dropdown.
• dropdownTarget: The element to work as a dropdown.
• visibleItemClassName:  It is a space-delimited list of class names to pass along to a child element.
• visibleItemCount: It denotes the number of visible items.
• visibleItemRenderer: The callback function invoked to render the item.

Syntax:

<CollapsibleList > ... </CollapsibleList >

Prerequisite:

• Introduction and Installation ReactJS
• ReactJS Blueprint MenuItem

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 the  CollapsibleList, MenuItem, and Classes from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”.

We are adding the CollapsibleList Component with six MenuItem Components passing with different values for the text prop. To the CollapsibleList we are passing values to the className, dropdownTarget, visibleItemRenderer, and visibleItemcount props.

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { CollapsibleList, MenuItem, Classes }
    from "@blueprintjs/core";

function App() {

    return (
        <div style={{
            padding: 30
        }}>
            <h3>
                ReactJS Blueprint CollapsibleList
                Component Props
            </h3>
            <CollapsibleList
                className={Classes.BREADCRUMBS}
                dropdownTarget={<span
                    className={Classes.BREADCRUMBS_COLLAPSED} />}
                visibleItemRenderer={() => { }}
                visibleItemCount={2}
            >
                <MenuItem text="Login" />
                <MenuItem text="User" />
                <MenuItem text="Profile" />
                <MenuItem text="Jobs" />
                <MenuItem text="Articles" />
                <MenuItem text="Contest" />
            </CollapsibleList>
        </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 the  CollapsibleList, MenuItem, and Classes from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”.

We are adding the CollapsibleList Component with six MenuItem Components passing with different values for the text prop. To the CollapsibleList we are passing values to the className, dropdownTarget, visibleItemRenderer, visibleItemClassName and collapseForm props.

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { CollapsibleList, MenuItem, Classes,
        Boundary } from "@blueprintjs/core";

function App() {

    return (
        <div style={{
            padding: 30
        }}>
            <h3>
                ReactJS Blueprint CollapsibleList
                Component Props
            </h3>

            <CollapsibleList
                className={Classes.BREADCRUMBS}
                dropdownTarget={<span className=
                    {Classes.BREADCRUMBS_COLLAPSED} />}
                visibleItemRenderer={() => { }}
                collapseFrom={Boundary.END}
                visibleItemClassName={Classes.ELEVATION_0}
            >
                <MenuItem text="Login" />
                <MenuItem text="User" />
                <MenuItem text="Profile" />
                <MenuItem text="Jobs" />
                <MenuItem text="Articles" />
                <MenuItem text="Contest" />
            </CollapsibleList>
        </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/collapsible-list.props