Function TabPanel

starters/hooks/src/Tabs.tsx:97–111

({state, ...props}: {state: TabListState<object>})

}

function TabPanel({state, ...props}: {state: TabListState<object>}) {
  let ref = useRef<HTMLDivElement>(null);
  let {tabPanelProps} = useTabPanel(props, state, ref);
  let {focusProps, isFocusVisible} = useFocusRing();

  return (
    <div
      {...mergeProps(tabPanelProps, focusProps)}
      ref={ref}
      className="react-aria-TabPanel"
      data-focus-visible={isFocusVisible || undefined}>
      {state.selectedItem?.props.children}
    </div>
  );
}