Function ToastRegion

starters/hooks/src/Toast.tsx:32–50

({state, ...props}: AriaToastRegionProps & {state: ToastState<string>})

}

function ToastRegion({state, ...props}: AriaToastRegionProps & {state: ToastState<string>}) {
  let ref = useRef<HTMLDivElement>(null);
  /*- begin highlight -*/
  let {regionProps} = useToastRegion(props, state, ref);
  /*- end highlight -*/
  let {focusProps, isFocusVisible} = useFocusRing();

  return (
    <div
      {...mergeProps(regionProps, focusProps)}
      ref={ref}
      className="react-aria-ToastRegion"
      data-focus-visible={isFocusVisible || undefined}>
      {state.visibleToasts.map(toast => (
        <Toast key={toast.key} toast={toast} state={state} />
      ))}
    </div>
  );
}

function Toast({state, toast, ...props}: AriaToastProps<string> & {state: ToastState<string>}) {
  let ref = useRef<HTMLDivElement>(null);