Virtualization

Jun 8, 2022

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>

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

Testing with ariakit-test

Example of how the ariakit-test package is used internally to test Ariakit components.

Render props vs. asChild

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.

Floating UI + Ariakit

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 with Select

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.

Dialog with React Router

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

How to test accessibility

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.

Scrollbars in dark mode

Make the browser show dark scrollbars when your site has a dark theme using the color-scheme CSS property.

Accessible links

Make links within paragraphs more accessible with the text-decoration-thickness CSS property.

queueMicrotask()

Thread about the handy queueMicrotask function available on all modern browsers.