Mount

Mount renders children that may be a function returning a value or a promise. While the promise resolves, it shows fallback and reports errors via onError.

function Mount(props: {
  children: React.ReactNode | (() => React.ReactNode | Promise<React.ReactNode>);
  fallback?: React.ReactNode;
  onError?: (error: unknown) => void;
}): React.ReactNode;

Basic usage#

Return a React node or a promise from the children function to defer rendering until it resolves.

import { Mount } from '@ilokesto/utilinent';

function UserPanel() {
  return (
    <Mount fallback={<span>Loading...</span>}>
      {async () => {
        const user = await fetch('/api/user').then((res) => res.json());
        return <div>{user.name}</div>;
      }}
    </Mount>
  );
}

Error handling#

Use onError to capture thrown errors or rejected promises, and show a safe fallback UI.

<Mount
  fallback={<div>Unable to load.</div>}
  onError={(error) => console.error('Mount failed:', error)}
>
  {() => {
    if (Math.random() > 0.5) {
      throw new Error('Oops');
    }
    return <div>Mounted</div>;
  }}
</Mount>

DOM-preserving variants#

Mount.div and other tag variants keep a wrapper element while the resolved content swaps in.

<Mount.section fallback={<Skeleton />}>
  {async () => <Profile />}
</Mount.section>