Share this page!

Enter URL or ID to Unroll

You can paste full URL like: https://x.com/threadreaderapp/status/1644127596119195649
or just the ID like: 1644127596119195649

How to get URL link on X (Twitter) App

  1. On the Twitter thread, click on or icon on the bottom
  2. Click again on or Share Via icon
  3. Click on Copy Link to Tweet
  4. Paste it above and click "Unroll Thread"!
  5. More info at Twitter Help
Devon Govett Profile picture
@devongovett
Dec 20 • 4 tweets • 2 min read • Read on X
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.

react-spectrum.adobe.com/react-aria/ind…
New in this release 🚀

• New landing page
• Downloadable Storybook starter kit
• Example CSS theme
• Optimized localized strings via build plugins and SSR
• Built-in "use client" for RSC
• Directory support in FileTrigger
• Ability for Menu to match trigger width
• Fixed using DialogTrigger and TooltipTrigger together
• Improved Tailwind plugin

Full release notes: react-spectrum.adobe.com/releases/2023-…
React Aria Components is the result of over a year of work, incorporating feedback from many people in our community. Built on top of our React Aria hooks, it offers a dramatically simpler way to craft world-class accessible components with custom styles.

The API takes composition even further than other libraries, while also offering the flexibility to go deep and customize just about anything you want. It's a balance of a simple API, advanced features, quality interactions, world-class accessibility, and scalability to advanced use cases that makes React Aria unique.
Huge thanks to everyone who contributed ideas, code, and feedback while we were in pre-release. We're so excited to empower even more people to build high quality accessible UIs, and can't wait to see what you build. This is just the beginning. Happy holidays! 🎄

• • •

Missing some Tweet in this thread? You can try to force a refresh
　

Keep Current with Devon Govett

Devon Govett Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @devongovett

Devon Govett Profile picture
Nov 9
React Aria Components has reached RC! 🚀

• Built-in form validation
↳ Native HTML constraints
↳ Custom validation functions
↳ Server validation – designed for React Server Actions
• New Toolbar component
• Improved Framer Motion support
• Hover events
• Simpler docs CSS React Aria Components RC banner showing built-in form validation and new toolbar component. The form has email and password fields and a checkbox labeled "I agree to the terms of service". The email field is marked invalid with a message "An account with this email already exists" under it, and the checkbox is not checked with an error "You must agree to the terms of service. Sign up and Log in buttons are below the form. The toolbar component includes a group of buttons representing text formatting controls including bold, italic, underline, and left, center, righ...
Our new form validation API is powered by native HTML constraint validation, with a declarative API to display error messages with custom styles. It also supports server validation that works seamlessly with React Server Actions, Remix, Zod, and more! 🤩

react-spectrum.adobe.com/react-aria/for…
Code example showing a Form that accepts a server action and validation errors as props from React’s useFormState hook. The form contains a TextField with name=“email” type=“email” and isRequired props, and contains a FieldError component. The serverAction function returns an errors object with the string "This account already exists" for the email field.
Validation is supported across all of our form components. Errors are displayed on blur to avoid confusing users on incomplete input. On submit, the first invalid field is automatically focused. It's accessible, declarative, and customizable. Really proud of how it turned out! 🥳
Read 5 tweets
Devon Govett Profile picture
Oct 11
Ok so, how did we make Parcel's bundling phase 15x faster (7x overall)? Through the magic of bitsets, with a sprinkle of WASM! 🚀

All of this was JS data structure changes, no Rust rewrite or algorithmic changes here. Even constant factors can add up. 🧵
In our bundling algorithm, we need to build a data structure that determines which bundle roots (e.g. entries, dynamic imports, etc.) each asset (module) is reachable from. We later use this to determine which bundle to place each asset in so there is minimal duplication.
To do this, we heavily relied on JS Map and Set objects. Profiling showed that over 50% of the time in the bundling algorithm was spent looking up values in various maps. These data structures are built on hash maps, and hashing (especially strings) can be expensive.
Read 9 tweets
Devon Govett Profile picture
Feb 25
Easy to forget, but the debate about signals is the same one we had about 2-way data binding vs unidirectional data flow 10 years ago. Signals are mutable state! They’re bindings with a new name. The simplicity of UI as a function of state is lost when updates flow unpredictably.
Say what you want about hooks and performance, but the programming model of writing a function that simply maps props/state to JSX is way simpler than thinking about how each individual value flows through your whole app.
With signals, you have to think about how each individual value is propagated. For example, in Solid, these components do different things! Thinking about whether each individual prop can change or not requires global reasoning rather than local. Image
Read 6 tweets
Devon Govett Profile picture
Nov 16, 2022
Announcing React Aria's drag and drop hooks! 🐉

♿️ Full keyboard and screen reader parity
🗃 Reorder, insert, or drop on list items
✅ Multiple selection
📱 Interoperable with native dnd
💾 File and directory support
🤩 Customizable UI and interactions

react-spectrum.adobe.com/blog/drag-and-…
Drag and drop is a very common interaction, but it is rarely made accessible. We wanted to change this.

React Aria provides a unified drag and drop API that works with mouse and touch, as well as keyboard and screen readers – including on mobile!
Our drag and drop hooks can be used standalone, or integrated with our existing collection components such as lists and tables to enable common interactions such as reordering and moving items between lists.

Documentation: react-spectrum.adobe.com/react-aria/dnd… Anatomy diagram of drag and drop, showing a drag source list
Read 4 tweets
Devon Govett Profile picture
Mar 17, 2022
How to write fast code: reduce memory access. All of these tips stem from that:

1. Reduce the size of your data structures so more can fit in CPU cache.
2. Replace strings with numbers.
3. Make use of bit flags. Don’t waste space on booleans.
4. Access memory linearly.
5. Make judicious use of the heap. Inline the most commonly accessed values, move large or less common ones to the heap.
6. Model data like a database. Normalize commonly used structures and pass ids rather than copying them around.
7. Consider using a struct of arrays rather than an array of structs. For example, if you have two types of value, store them in separate arrays instead of a single one with a type field. This reduces memory usage and makes iterating by type linear. en.wikipedia.org/wiki/AoS_and_S…
Read 7 tweets
Devon Govett Profile picture
May 8, 2021
I’ve been using Tailwind to build a new landing page for Parcel 2 lately. Really enjoying it! 🤩

I think what’s most under-appreciated by critics is that it’s not just a 1:1 mapping of classes to CSS properties. It helps you create better designs more quickly! 🧵
As a non-designer, choosing colors is the hardest part of creating a website for me. Tailwind includes an expertly crafted color system by default, so you don’t need to spend time choosing your own colors if you don’t want to. If you do, you can override everything.
Same goes for sizing, spacing, rounded corners, typography, etc. It’s not just another syntax for CSS, it helps enforce design consistency.

It’s like CSS, but you can only use pre-defined variables. Constraints are a good thing!
Read 4 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

Send Email!

:(