@react-aria/utils

Focus Management

This feature allows you to focus an element without causing the browser to scroll to it, which can be useful in maintaining the user's scroll position while programmatically moving focus.

import { focusWithoutScrolling } from '@react-aria/utils';

function handleFocus(element) {
  focusWithoutScrolling(element);
}

Keyboard Event Handling

This utility helps in filtering out non-DOM properties from props, ensuring that only valid HTML attributes are passed to the DOM element, thus preventing React warnings and improving HTML output.

import { filterDOMProps } from '@react-aria/utils';

function Button(props) {
  return <button {...filterDOMProps(props)}>Click me</button>;
}

Merge Props

Merge props from different sources, typically used to combine default and user-provided props in a component. It ensures that event handlers and other attributes are correctly combined and overridden if necessary.

import { mergeProps } from '@react-aria/utils';

function mergeComponentProps(userProps, defaultProps) {
  return mergeProps(defaultProps, userProps);
}