{"library":"react-aria","title":"React Aria","description":"React Aria is a collection of unstyled, accessible UI primitives and hooks for building robust and inclusive user interfaces in React. Unlike traditional component libraries that provide pre-styled components, React Aria offers a foundational layer of accessibility, interaction logic, and internationalization, allowing developers complete control over visual styling and DOM structure. The current stable version is 3.48.0, with new features and improvements released frequently, typically on a monthly or bi-monthly cadence. Its core differentiator lies in its 'headless' nature, focusing purely on standardized, accessible behavior by leveraging WAI-ARIA practices, making it an ideal choice for design systems that require highly customizable yet fully accessible components without opinionated styling.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-aria"],"cli":null},"imports":["import { useButton } from 'react-aria';","import { useFocusRing } from 'react-aria';","import { mergeProps } from 'react-aria';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { useButton } from 'react-aria';\nimport { mergeProps } from 'react-aria';\n\ninterface MyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  onPress?: () => void;\n}\n\nfunction MyButton(props: MyButtonProps) {\n  let ref = React.useRef<HTMLButtonElement>(null);\n  let { buttonProps, isPressed } = useButton(props, ref);\n\n  return (\n    <button\n      {...mergeProps(buttonProps, props)}\n      ref={ref}\n      style={{\n        backgroundColor: isPressed ? 'darkblue' : 'blue',\n        color: 'white',\n        padding: '10px 20px',\n        border: 'none',\n        borderRadius: '5px',\n        cursor: 'pointer'\n      }}\n    >\n      {props.children}\n    </button>\n  );\n}\n\n// Example usage in a component\nexport function App() {\n  const handlePress = () => {\n    console.log('Button pressed!');\n    alert('Hello from React Aria Button!');\n  };\n\n  return (\n    <div>\n      <h1>React Aria Quickstart</h1>\n      <MyButton onPress={handlePress}>Click Me</MyButton>\n    </div>\n  );\n}","lang":"typescript","description":"This quickstart demonstrates how to create a custom accessible button using `useButton` from React Aria, applying the necessary props and a ref to a native HTML button element. It also shows `mergeProps` for combining properties.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}