Devon Govett's banner

Devon Govett

@devongovett • 41,728 subscribers

Creator of @parceljs. Engineer @adobe working on React Aria and React Spectrum.

Shorts

Seems like a good opportunity to share a trick I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. 🎉

Seems like a good opportunity to share a trick I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. 🎉

48,052 просмотров

React Aria has built-in support for drag and drop. This kanban board is only ~100 lines, and even supports keyboard accessibility with no additional code needed! 🙂

React Aria has built-in support for drag and drop. This kanban board is only ~100 lines, and even supports keyboard accessibility with no additional code needed! 🙂

54,731 просмотров

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉

83,922 просмотров

Along with automatic skeletons, another thing I worked on recently was coordinated image loading. You can wrap any group of images with an <ImageCoordinator>, and all the images under it will fade in together rather than popcorning. Makes for a much more pleasant experience! 😀

Along with automatic skeletons, another thing I worked on recently was coordinated image loading. You can wrap any group of images with an <ImageCoordinator>, and all the images under it will fade in together rather than popcorning. Makes for a much more pleasant experience! 😀

122,874 просмотров

I fixed the most upvoted React Aria issue of all time: in the next release, you can enter "invalid" dates like February 31st, and they'll be constrained on blur instead of as you type. This is helpful for transient states, e.g. editing the day before the month. It also enabled entering other temporary values like leading zeros. As you can see in the video, previously if the month was February you couldn't change the day to anything above 28. You'd first have to change the month and then go back to the day. Now the temporary invalid state is allowed. This might seem like such a simple issue, but it was actually pretty complicated to fix. It required entirely changing the way the state is stored. JS Date and Intl.DateTimeFormat cannot store or format dates that don't exist, so we had to reimplement it from scratch. Now we use Intl.DateTimeFormat to get the order of the fields for each locale, but format the value of each segment individually with Intl.NumberFormat. Lots of edge cases to handle as well, like daylight saving time, 12/24 hour time, different calendar and numbering systems, etc. Really glad to finally fix this one though!

I fixed the most upvoted React Aria issue of all time: in the next release, you can enter "invalid" dates like February 31st, and they'll be constrained on blur instead of as you type. This is helpful for transient states, e.g. editing the day before the month. It also enabled entering other temporary values like leading zeros. As you can see in the video, previously if the month was February you couldn't change the day to anything above 28. You'd first have to change the month and then go back to the day. Now the temporary invalid state is allowed. This might seem like such a simple issue, but it was actually pretty complicated to fix. It required entirely changing the way the state is stored. JS Date and Intl.DateTimeFormat cannot store or format dates that don't exist, so we had to reimplement it from scratch. Now we use Intl.DateTimeFormat to get the order of the fields for each locale, but format the value of each segment individually with Intl.NumberFormat. Lots of edge cases to handle as well, like daylight saving time, 12/24 hour time, different calendar and numbering systems, etc. Really glad to finally fix this one though!

28,897 просмотров

Built a React Aria Calendar with swipe gestures to navigate between months! Uses CSS scroll snap for native 120fps animations, with a neat trick to enable infinite scrolling in both directions. 👇

Built a React Aria Calendar with swipe gestures to navigate between months! Uses CSS scroll snap for native 120fps animations, with a neat trick to enable infinite scrolling in both directions. 👇

41,687 просмотров

New React Aria release! ✅ Multi-select ComboBox with customizable selection rendering (e.g. TagGroup) 🏝️ Tree sections – create labeled groups of items 💯 Better NumberField paste handling 📆 Improved Calendar month and year dropdown behavior 🐞 Lots of bug fixes!

New React Aria release! ✅ Multi-select ComboBox with customizable selection rendering (e.g. TagGroup) 🏝️ Tree sections – create labeled groups of items 💯 Better NumberField paste handling 📆 Improved Calendar month and year dropdown behavior 🐞 Lots of bug fixes!

18,890 просмотров

Animating React Aria Tabs, ToggleButtonGroup, etc. is about to be super easy with the new SelectionIndicator component. 🥳 • Native CSS transitions, no animation library needed. • Works with SSR with no flicker before JS runs. • No ResizeObserver. • Enter + exit animations.

Animating React Aria Tabs, ToggleButtonGroup, etc. is about to be super easy with the new SelectionIndicator component. 🥳 • Native CSS transitions, no animation library needed. • Works with SSR with no flicker before JS runs. • No ResizeObserver. • Enter + exit animations.

22,905 просмотров

New React Aria release! 🎁 🔎 Autocomplete alpha 📽️ CSS transition support in addition to keyframes 📆 Custom Calendar first day of week 🧪 Unit test utility package for ARIA patterns 🎯 Removed custom hit testing in usePress 🐞 and plenty of bug fixes!

New React Aria release! 🎁 🔎 Autocomplete alpha 📽️ CSS transition support in addition to keyframes 📆 Custom Calendar first day of week 🧪 Unit test utility package for ARIA patterns 🎯 Removed custom hit testing in usePress 🐞 and plenty of bug fixes!

35,054 просмотров

The React Aria team is cooking up a Command Palette example combining our Dialog, Autocomplete, and Menu components with Tailwind styles. 🧑‍🍳

The React Aria team is cooking up a Command Palette example combining our Dialog, Autocomplete, and Menu components with Tailwind styles. 🧑‍🍳

18,246 просмотров

Just implemented an "auto" variant for our button component with this technique. 🪄

Just implemented an "auto" variant for our button component with this technique. 🪄

20,045 просмотров

Live example with a color picker you can play with:

Live example with a color picker you can play with:

14,651 просмотров

A cool feature of the Disclosure component is that it uses the hidden=until-found attribute so you can still search the content while it is closed with ctrl+F (currently supported in Chrome). The disclosure will automatically open when content is found inside! 😲

A cool feature of the Disclosure component is that it uses the hidden=until-found attribute so you can still search the content while it is closed with ctrl+F (currently supported in Chrome). The disclosure will automatically open when content is found inside! 😲

10,687 просмотров

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

New React Aria release! 📆 Calendar multi-select, week/day views, month/year pickers, custom weeksInMonth ⚓️ RangeCalendar unavailable anchor date ✅ Checkbox/Radio/Switch description and error message 👢 TableFooter ⛽️ SliderFill 💯 Non-object collection items 🧪 New test utils

New React Aria release! 📆 Calendar multi-select, week/day views, month/year pickers, custom weeksInMonth ⚓️ RangeCalendar unavailable anchor date ✅ Checkbox/Radio/Switch description and error message 👢 TableFooter ⛽️ SliderFill 💯 Non-object collection items 🧪 New test utils

26,586 просмотров • 6 дней назад

Announcing React Aria Components v1.0.0! 🥳 Over 40 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles.

Announcing React Aria Components v1.0.0! 🥳 Over 40 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles.

542,490 просмотров • 2 лет назад

Introducing the new React Aria docs! 🎉 All-new content and search experience. Interactive CSS and Tailwind examples to get you started quickly – just install with shadcn. New guides and full example apps. MCP server and AI integrations. Check it out!

Introducing the new React Aria docs! 🎉 All-new content and search experience. Interactive CSS and Tailwind examples to get you started quickly – just install with shadcn. New guides and full example apps. MCP server and AI integrations. Check it out!

76,237 просмотров • 5 месяцев назад

Yoooo CSS view transitions are incredible! This is like 100 lines. Wild. 🤯

Yoooo CSS view transitions are incredible! This is like 100 lines. Wild. 🤯

120,760 просмотров • 1 год назад

I recently worked on a skeleton component that works with any layout automatically. You can render any real component with mock content, wrap it with a <Skeleton>, and any text, images, etc. get replaced with a shimmer effect. Waaaay easier than manually sizing rectangles. 😃

I recently worked on a skeleton component that works with any layout automatically. You can render any real component with mock content, wrap it with a <Skeleton>, and any text, images, etc. get replaced with a shimmer effect. Waaaay easier than manually sizing rectangles. 😃

114,650 просмотров • 1 год назад

Big React Aria release! 🚀 🥳 Multi Select! 🎬 ComboBox onAction prop, e.g. "create" item ➡️ Disclosure animation ✅ New SelectionIndicator component – animations in Tabs, ToggleButtonGroup, etc. 📱 Improved modal scrolling behavior in iOS 26 📆 Calendar selectionAlignment prop

Big React Aria release! 🚀 🥳 Multi Select! 🎬 ComboBox onAction prop, e.g. "create" item ➡️ Disclosure animation ✅ New SelectionIndicator component – animations in Tabs, ToggleButtonGroup, etc. 📱 Improved modal scrolling behavior in iOS 26 📆 Calendar selectionAlignment prop

51,350 просмотров • 8 месяцев назад

Recreated the Apple Photos UI with React Aria in just ~200 lines! Complete with virtualized scrolling, view transitions, adjustable waterfall layout, folder tree, search, multi-selection, and accessible drag and drop. Just one of the demos I'm planning for the new docs. 🙂

Recreated the Apple Photos UI with React Aria in just ~200 lines! Complete with virtualized scrolling, view transitions, adjustable waterfall layout, folder tree, search, multi-selection, and accessible drag and drop. Just one of the demos I'm planning for the new docs. 🙂

46,438 просмотров • 8 месяцев назад

Probably old news now, but the CSS View Transition API is SUPER cool! Entry/exit layout animations like this used to be super complicated or require giant libraries. Now it's like 2 lines of JS, and a few lines of CSS if you want to customize the animation. Amazing! 🤯

Probably old news now, but the CSS View Transition API is SUPER cool! Entry/exit layout animations like this used to be super complicated or require giant libraries. Now it's like 2 lines of JS, and a few lines of CSS if you want to customize the animation. Amazing! 🤯

97,659 просмотров • 1 год назад

I recreated the iOS list view with React Aria Components and Framer Motion! It has fluid swipe gestures, layout animations, multiple selection mode, and even keyboard support. The code is remarkably small for that much functionality too. Check it out! 🤩

I recreated the iOS list view with React Aria Components and Framer Motion! It has fluid swipe gestures, layout animations, multiple selection mode, and even keyboard support. The code is remarkably small for that much functionality too. Check it out! 🤩

89,948 просмотров • 2 лет назад

HUGE React Aria release! 🍿 🔍 Autocomplete: Command Palette, Searchable Select and Submenu examples 🆕 3 new components: Toast, Tree, and Virtualizer 🧩 Custom Menu/Popover/Tooltip triggers 🌉 Table colspan 👆 usePress interop, fixing 15+ issues 💨 Tailwind v4 📅 DatePicker RTL

HUGE React Aria release! 🍿 🔍 Autocomplete: Command Palette, Searchable Select and Submenu examples 🆕 3 new components: Toast, Tree, and Virtualizer 🧩 Custom Menu/Popover/Tooltip triggers 🌉 Table colspan 👆 usePress interop, fixing 15+ issues 💨 Tailwind v4 📅 DatePicker RTL

47,297 просмотров • 1 год назад

Big React Aria release! 🚀 🎨 7 Color Picker components now GA, with new Tailwind starter kit examples! ⏳ Pending Button state 🚪 New Disclosure component 🪗 DisclosureGroup (aka Accordion) 🌴 Tree beta 📱 Improved Android touch handling Check it out!

Big React Aria release! 🚀 🎨 7 Color Picker components now GA, with new Tailwind starter kit examples! ⏳ Pending Button state 🚪 New Disclosure component 🪗 DisclosureGroup (aka Accordion) 🌴 Tree beta 📱 Improved Android touch handling Check it out!

43,506 просмотров • 1 год назад

New React Aria release! 📢 🪗 Disclosure + Accordion GA 🔎 Ctrl F in DisclosureGroup ☎️ New ToggleButtonGroup component ✅ Mixed selection and actions in Menu 💬 Complex Menu popovers ❌ Dialog close button slot 💯 Devanagari & Bengali numbers 🍾 Full TS strict compliance

New React Aria release! 📢 🪗 Disclosure + Accordion GA 🔎 Ctrl F in DisclosureGroup ☎️ New ToggleButtonGroup component ✅ Mixed selection and actions in Menu 💬 Complex Menu popovers ❌ Dialog close button slot 💯 Devanagari & Bengali numbers 🍾 Full TS strict compliance

29,107 просмотров • 1 год назад

Drop everything! Drag and drop support in the React Aria Tree component is here. 🫳🎤 🪜 Reorder and move between levels 🌴 Drop on or between rows 🧩 Interoperable with other components 📜 Auto expanding and scrolling 📂 File and directory support 🎹 Fully keyboard accessible

Drop everything! Drag and drop support in the React Aria Tree component is here. 🫳🎤 🪜 Reorder and move between levels 🌴 Drop on or between rows 🧩 Interoperable with other components 📜 Auto expanding and scrolling 📂 File and directory support 🎹 Fully keyboard accessible

18,896 просмотров • 1 год назад

The new React Aria docs will have interactive prop controls that update both the component and the code. Configure, test, and copy into your app!

The new React Aria docs will have interactive prop controls that update both the component and the code. Configure, test, and copy into your app!

16,198 просмотров • 9 месяцев назад

Why does React Aria have its own Virtualizer? Why not use an existing library? Accessibility. If you combine a virtualizer with most component libraries, you might notice that keyboard navigation breaks. That's because scrolling the focused element out of view removes it from the DOM. Then when you press the arrow keys, nothing happens because the list has lost focus. React Aria's Virtualizer is deeply integrated with our components, so we can automatically persist the focused item in the DOM even when it scrolls out of view.

Why does React Aria have its own Virtualizer? Why not use an existing library? Accessibility. If you combine a virtualizer with most component libraries, you might notice that keyboard navigation breaks. That's because scrolling the focused element out of view removes it from the DOM. Then when you press the arrow keys, nothing happens because the list has lost focus. React Aria's Virtualizer is deeply integrated with our components, so we can automatically persist the focused item in the DOM even when it scrolls out of view.

20,390 просмотров • 1 год назад

Here's React Aria's upcoming Virtualizer component with a waterfall layout. Virtualizer comes with list, grid, waterfall, and table layouts, and you can also create your own completely custom layout.

Here's React Aria's upcoming Virtualizer component with a waterfall layout. Virtualizer comes with list, grid, waterfall, and table layouts, and you can also create your own completely custom layout.

18,237 просмотров • 1 год назад

Combining React Aria's Autocomplete, Menu, and upcoming SubDialog component to create multi-level filterable submenus. 😎

Combining React Aria's Autocomplete, Menu, and upcoming SubDialog component to create multi-level filterable submenus. 😎

16,554 просмотров • 1 год назад

Больше нет контента для загрузки