REACT TREE MULTI SELECTv4.1.0

REACT TREE MULTI SELECTv4.1.0

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.

Large data with 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.
IMPORTANT

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

Non virtualized list