Get started with React Aria

One of my favorite React libraries is React Aria by Adobe. React Aria is a low leveled library that helps build UI components. It is not a component library itself; you use it to develop your component library.

If you don't want to build your components, you should check out these five great UI libraries you can use or be inspired by.

Adobe uses it to build React Spectrum, their UI component library. But with the modern web, what is remarkable is that so many things can be composed together to make something unique for your app.

It has a modern hook drive API

React Aria is built on modern JavaScript features, heavily relying on destructuring, spreads, and React hooks. These might seem a little foreign, but they allow many props to be set while giving you fine control.

For example, here is how you can programmatically track when an element is being hovered:

const { hoverProps, isHovered } = useHover({
  onHoverStart: (e) => console.log(`Hover start ${e.pointerType}`)
  onHoverEnd: (e) => console.log(`Hover end ${e.pointerType}`)
});

return (
  <div
    {...hoverProps}
    style={{
      background: isHovered ? 'darkgreen' : 'green',
      color: 'white',
      display: 'inline-block',
      padding: 4,
      cursor: 'pointer'
    }}
    role="button"
    tabIndex={0}
  >
    Hover me!
  </div>
)

The hook returns props which are spread into the element you want to control. The hook also exposes a simple boolean to know if the component isHovered or not. React Aria uses this pattern throughout the library and is consistently applied.

Built for server-side rendering

I use React Aria with Next.js, so most of my components are rendered server-side. Nothing frustrates me more than finding a great widget and realizing it has browser dependencies that break when rendered on the server.

Adobe built React Aria with server-side rendering in mind, so these issues don't occur. It uses React's useId hook to ensure IDs are consistently applied no matter where the render occurs.

It allows you to quickly build components without worrying about where they are rendered.

Built with composability in mind

React Aria is a headless library; it doesn't have any styling. Instead, the hook pattern allows the props and actions to apply to any component. This feature will enable you to style things with your favorite libraries, such as Tailwind or Styled Components.

It also means you can use different underlying components than just basic HTML components. I often combine React Aria with Framer Motion to add subtle animations to my UI. Instead of using a div I use Framer's motion.div , and it works the same!

And, of course, the library is under active development, with new features added regularly.

Get started

import type { AppProps } from 'next/app'
import { SSRProvider } from 'react-aria'

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SSRProvider>
      <Component {...pageProps} />
    </SSRProvider>
  )
}

Build a component

When building a component, you will use the hook that accompanies the element. For example, a <button> will use useButton:

import { useButton } from 'react-aria'
import { useRef } from 'react'

type Props = ButtonHTMLAttributes<HTMLButtonElement> 

function Button({children, className, ...props}: Props) {
  const ref = useRef()
  const { buttonProps } = useButton(props, ref)

  return (
    <button {...buttonProps} ref={ref} className={`rounded bg-sky-500 px-2.5 py-1.5 ${className}`}>
      {children}
    </button>
  );
}

<Button onPress={() => alert('Button pressed!')}>My Button</Button>

React Aria changes the event handler to onPress which is unified across mobile and desktop browsers. It handles mouse and touch events and presents the data in a unified interface. It takes a little getting used to when using the components, but it is much more powerful.

And there you go! You've built your first component with React Aria. Explore the library to see what other fantastic elements you can make!

I'm building a suite of internet products to find a better alternative to the next tech job. The first product is a SaaS app that helps manage localizations and copy for your app.

If you want to follow along, please find me on Twitter. It means a lot!