View profile

Virtualization

Virtualization
By Haz • Issue #4 • View online
I’d like to share the work in progress on one of Ariakit’s most requested features that will benefit a lot of components in the library.

Virtualization
Scrolling a virtualized list of messages
Scrolling a virtualized list of messages
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.
Haz
Virtualized list with keyboard navigation built with Ariakit (work in progress): https://t.co/FR48GpEnU0
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.
I will share more information in the next newsletter. Stay tuned.
More Ariakit
Example of how the ariakit-test package is used internally to test Ariakit components.
Thoughts on render props vs. the asChild prop.
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 component built with the Ariakit Menu.
Toolbar component with a custom Select.
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.
Example of multiple Ariakit components combined to create an animated UI.
More Dev
Thread on how you should test the accessibility of your site.
A little trick to accept any string but still provide an autocomplete with specific values.
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.
Did you enjoy this issue?
Haz
By Haz

Receive monthly(ish) updates about Ariakit directly in your inbox.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue