UPDATE: We're testing an experimental virtualization feature. Feel free to use this unlisted example as a starting point: select-combobox-virtualized. I welcome you to try it and provide feedback. However, remember that the API is currently in the experimental phase and is likely to change soon.
Do you know what Combobox, Menu, Radio, Select, Tab, and Toolbar have in common? They all take advantage of the powerful Composite component.
Those components may render multiple elements. Ariakit is already optimized to render hundreds of composite items. But, for those who need an extra performance boost, we’ve been working on a virtualization feature.
![const select = useSelectState({ defaultItems: [ { id: "africa-abidjan", value: "Africa/Abidjan" }, { id: "africa-accra", value: "Africa/Accra" }, ... { id: "us-samoa", value: "US/Samoa" }, ], }) <Select state={select} /> <SelectPopover state={select}> <SelectViewport> {(item) => <SelectItem {...item} />} </SelectViewport> </SelectPopover>](https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd8c5a7df-31b2-40b7-ad12-0f97ffc3fa76_3606x2370.png "const select = useSelectState({ defaultItems: [ { id: \"africa-abidjan\", value: \"Africa/Abidjan\" }, { id: \"africa-accra\", value: \"Africa/Accra\" }, ... { id: \"us-samoa\", value: \"US/Samoa\" }, ], }) <Select state={select} /> <SelectPopover state={select}> <SelectViewport> {(item) => <SelectItem {...item} />} </SelectViewport> </SelectPopover>")
Virtualization means that, even if your list has thousands of items, only the elements in the viewport will be rendered.
On Ariakit, we have to consider arrow keys and typeahead navigation. We still need access to items outside of the viewport to move focus to them when necessary. That’s why we’re building this feature into a new optional CompositeViewport component.
All components powered by Composite will immediately benefit from this feature.
More Ariakit
Example of how the ariakit-test package is used internally to test Ariakit components.
Thoughts on render props vs. the asChild prop.
GitHub-like Textarea with Combobox
Using the Ariakit Combobox component to create a GitHub-like textarea widget.
We’ve recently migrated from Popper.js to Floating UI on Ariakit popovers.
Context Menu built with Ariakit
Context Menu component built with the Ariakit Menu.
Toolbar component with a custom Select.
Dialog with <details><summary>
Progressively enhanced Dialog component rendered as <details><summary>, so it works before the JavaScript finishes loading.
Using React Router to control the state of the Ariakit Dialog. This is how you’d use the Dialog component in a Remix app.
Menu, Dialog, Form, and CSS transitions
Example of multiple Ariakit components combined to create an animated UI.
More Dev
Thread on how you should test the accessibility of your site.
TypeScript string with autocomplete
A little trick to accept any string but still provide an autocomplete with specific values.
Using the built-in browser validation API
Example of how to use the built-in browser validation API with JavaScript. That’s the same technique used in the Ariakit Form component.
Make the browser show dark scrollbars when your site has a dark theme using the color-scheme CSS property.
Make links within paragraphs more accessible with the text-decoration-thickness CSS property.
Thread about the handy queueMicrotask function available on all modern browsers.
Hey Haz! Curious if there were any updates on the virtualization features. Is that still planned?