@highlight-ui/sandbox-select-low-domy

Trying to use Select to render a large amount of options (employee list on Personio) takes too long to render.

While originally intended to use react-window to virtualise the rendering of the options, I found myself struggling to re-shape the component so that the library would fit.

Instead I opted to reduce the DOM count by:

1. Not using the built-in Checkbox and Avatar components.
2. Preventing the rendering of empty b elements.
3. Reducing the amount of text wrappers.

Features

This version should be almost 100% backwards compatiblie with the existing Select component. One thing to note when using the Avatar type option is that, if label is missing, it won’t render a placeholder image.

Installation

Using npm:

npm install @highlight-ui/sandbox-select-low-domy

Using yarn:

yarn add @highlight-ui/sandbox-select-low-domy

Using pnpm:

pnpm add @highlight-ui/sandbox-select-low-domy

Once the package is installed, you can import the library:

import { Select } from '@highlight-ui/sandbox-select-low-domy';

Getting started

See Select.

Place in design system 💻

select-low-domy is a Low-DOM-count version of select.

Contributing 🖌️

If you're interested in contributing, please visit our contribution page.