Ariakit

Share this post

Virtualization

newsletter.ariakit.org

Discover more from Ariakit

Receive monthly updates about Ariakit directly in your inbox.
Over 1,000 subscribers
Continue reading
Sign in

Virtualization

Haz
Jun 8, 2022
Share this post

Virtualization

newsletter.ariakit.org
3
Share

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.

Share this post

Virtualization

newsletter.ariakit.org
3
Share
3 Comments
Share this discussion

Virtualization

newsletter.ariakit.org
Rohit Rajendran
Apr 24

Hey Haz! Curious if there were any updates on the virtualization features. Is that still planned?

Expand full comment
Reply
Share
2 replies by Haz and others
2 more comments...
Top
New
Community

No posts

Ready for more?

© 2023 Haz
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing