@react-aria/link

What is @react-aria/link?

@react-aria/link is a package that provides accessible link components for React applications. It is part of the React Aria library, which offers a collection of hooks that implement accessible UI patterns.

What are @react-aria/link's main functionalities?

Accessible Link

This feature allows you to create an accessible link component using the useLink hook. The hook provides the necessary props to ensure the link is accessible.

import { useLink } from '@react-aria/link';
import { useRef } from 'react';

function MyLink(props) {
  let ref = useRef();
  let { linkProps } = useLink(props, ref);

  return (
    <a {...linkProps} ref={ref}>
      {props.children}
    </a>
  );
}

Keyboard Navigation

This feature demonstrates how to use the useLink hook to create links that are navigable via keyboard, ensuring accessibility for users who rely on keyboard navigation.

import { useLink } from '@react-aria/link';
import { useRef } from 'react';

function MyLink(props) {
  let ref = useRef();
  let { linkProps } = useLink(props, ref);

  return (
    <a {...linkProps} ref={ref}>
      {props.children}
    </a>
  );
}

function App() {
  return (
    <div>
      <MyLink href="#">Home</MyLink>
      <MyLink href="#">About</MyLink>
      <MyLink href="#">Contact</MyLink>
    </div>
  );
}

Other packages similar to @react-aria/link

react-router-dom

react-router-dom is a popular package for handling routing in React applications. It provides the Link component, which is used to create navigational links. While it focuses on routing, it also ensures that links are accessible. However, it is more feature-rich in terms of routing capabilities compared to @react-aria/link.

reach-router

reach-router is another routing library for React that emphasizes accessibility. It provides the Link component for navigation, similar to @react-aria/link. However, reach-router is more focused on routing and navigation, whereas @react-aria/link is specifically designed for creating accessible link components.

README

@react-aria/link

This package is part of react-spectrum. See the repo for more details.