@base-ui-components/react/esm/field/error/useFieldError.js

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

'use client';

import * as React from 'react';
import { mergeReactProps } from '../../utils/mergeReactProps.js';
import { useBaseUiId } from '../../utils/useBaseUiId.js';
import { useEnhancedEffect } from '../../utils/useEnhancedEffect.js';
import { useFieldRootContext } from '../root/FieldRootContext.js';
export function useFieldError(params) {
  const {
    id: idProp,
    rendered,
    formError
  } = params;
  const {
    setMessageIds,
    validityData
  } = useFieldRootContext();
  const id = useBaseUiId(idProp);
  useEnhancedEffect(() => {
    if (!rendered || !id) {
      return undefined;
    }
    setMessageIds(v => v.concat(id));
    return () => {
      setMessageIds(v => v.filter(item => item !== id));
    };
  }, [rendered, id, setMessageIds]);
  const getErrorProps = React.useCallback((externalProps = {}) => mergeReactProps(externalProps, {
    id,
    children: formError || (validityData.errors.length > 1 ? /*#__PURE__*/React.createElement('ul', {}, validityData.errors.map(message => /*#__PURE__*/React.createElement('li', {
      key: message
    }, message))) : validityData.error)
  }), [id, formError, validityData]);
  return React.useMemo(() => ({
    getErrorProps
  }), [getErrorProps]);
}