@dotcms/react/lib/next/components/FallbackComponent/FallbackComponent.esm.js

Official React Components library to render a dotCMS page.

"use client";
import { jsx, jsxs } from 'react/jsx-runtime';
import { useIsDevMode } from '../../hooks/useIsDevMode.esm.js';

/**
 * @internal
 *
 * Renders a fallback component when no matching component is found for a content type
 *
 * @component
 * @param {DotCMSFallbackComponentProps} props - Component properties
 * @param {NoComponentType} [props.UserNoComponent] - Optional custom component to render
 * @param {DotCMSContentlet} [props.contentlet] - The contentlet that couldn't be rendered
 * @returns {JSX.Element} The rendered fallback component
 *
 * @example
 * ```tsx
 * <FallbackComponent
 *   UserNoComponent={CustomNoComponent}
 *   contentlet={contentlet}
 * />
 * ```
 */
function FallbackComponent({
  UserNoComponent,
  contentlet
}) {
  const isDevMode = useIsDevMode();
  if (!isDevMode) {
    return null;
  }
  const NoComponentFound = UserNoComponent || NoComponent;
  return jsx(NoComponentFound, Object.assign({}, contentlet));
}
/**
 * @internal
 *
 * Component to render when there is no component for the content type.
 *
 * @param {DotCMSBasicContentlet} contentType - The content type that couldn't be rendered
 * @return {*}
 */
function NoComponent({
  contentType
}) {
  return jsxs("div", {
    "data-testid": "no-component",
    children: ["No Component for ", jsx("strong", {
      children: contentType
    }), "."]
  });
}

export { FallbackComponent };