react-tree-multi-select docs

Virtualization

By default, react-tree-multi-select uses virtualization to render items efficiently. Virtualization helps improve performance by only rendering the visible portion of a large list, which makes it the recommended choice in most cases. The following example demonstrates the component rendering a large number of nodes with virtualization enabled.

import React, {FC, memo, useState} from 'react';
import {TreeMultiSelect} from 'react-tree-multi-select';
import {largeTreeNodeData25, largeTreeNodeData50, RandomTreeNode} from '@/utils/utils';
import {Select} from '@/shared-components/Select';

export const LargeDataExample: FC = memo(() => {

  const [data, setData] = useState<RandomTreeNode[]>(largeTreeNodeData25.data);

  const handleOptionChange = (value: string): void => {
    setData(value === '50' ? largeTreeNodeData50.data : largeTreeNodeData25.data);
  };

  return (
    <div className="large-data-example">
      <Select
        label="Choose amount of nodes:"
        options={[
          {name: `${largeTreeNodeData25.amount}`, value: '25'},
          {name: `${largeTreeNodeData50.amount}`, value: '50'}
        ]}
        onChange={handleOptionChange}
      />
      <TreeMultiSelect data={data}/>
    </div>
  );
});

Choose amount of nodes:

Disabling Virtualization

You can disable virtualization by passing the isVirtualized={false} prop. A common reason to do this is when you want the dropdown width to automatically adjust to the size of its content. Virtualization uses absolute positioning for list items and only renders a subset of them at a time, which prevents the dropdown from resizing based on its full content.

To disable virtualization and make the dropdown adjust its width automatically: 1. Pass isVirtualized={false} to your component. 2. Add width: auto; to the .rtms-dropdown class in your styles.

IMPORTANTOnly disable virtualization if you have a relatively small number of items, since rendering all items at once can reduce performance.

This example demonstrates the component when virtualization is disabled, allowing the dropdown to resize automatically.

import React, {FC, memo, useState} from 'react';
import {TreeMultiSelect} from 'react-tree-multi-select';
import {generateRandomTreeNodeData, RandomTreeNode} from '@/utils/utils';

/*Add to styles:
.non-virtualized-example .rtms-dropdown {
  width: auto;
}*/
export const NonVirtualizedExample: FC = memo(() => {

  const [data] = useState<RandomTreeNode[]>(generateRandomTreeNodeData(3, 3));

  return (
    <div className="non-virtualized-example">
      <TreeMultiSelect
        data={data}
        isVirtualized={false}
      />
    </div>
  );
});

REACT TREE MULTI SELECT

REACT TREE MULTI SELECT

Virtualization

Disabling Virtualization