useKeyboardArrowNavigation

import { useKeyboardArrowNavigation } from "reshaped"

useKeyboardArrowNavigation replaces Tab navigation with arrow key navigation for the given container element. All elements inside the container will be treated as a group for the tab flow on the page and the hook will automatically handle the rowing tabIndex attribute.

It's used for building custom menus or selection groups and Reshaped uses it internally for components like ToggleButtonGroup and Tabs.

export default function Example() {
  const ref = useRef<HTMLDivElement>(null);

  useKeyboardArrowNavigation({ ref, circular: true });

  return (
    <View gap={4}>
      <View.Item>
        <Button onClick={() => {}}>Before</Button>
      </View.Item>

      <View
        borderRadius="medium"
        backgroundColor="neutral-faded"
        direction="row"
        gap={2}
        padding={4}
        attributes={{ ref }}
      >
        <Button onClick={() => {}}>Action 1</Button>
        <Button onClick={() => {}}>Action 2</Button>
        <Button onClick={() => {}}>Action 3</Button>
      </View>

      <View.Item>
        <Button onClick={() => {}}>After</Button>
      </View.Item>
    </View>
  );
}

• Tab - place focus on the last focused item or the first item if no item was focused
• ArrowLeft / ArrowUp - move focus to the previous item
• ArrowRight / ArrowDown - move focus to the next item
• Space / Enter - select the focused item
• Home - move focus to the first item
• End - moves focus to the last item

({
  // Container element ref defining the navigation scope
  ref: React.RefObject<HTMLElement | null>;

  // Disable the arrow navigation
  disable?: boolean

  // Navigation orientation, works in both directions by default
  orientation?: "vertical" | "horizontal";

  // Loop the navigation when reaching the end or the start
  circular?: boolean;
}) => void