[Feature]: `Suspense.with` with `fallback` callback prop

[ojj1123]

Package Scope

@suspensive/react

Description

Hi, I'm using suspensive at my company.

I'd like to suggest supporting for Suspense.with with fallback callback prop (called render prop). I think this is useful when we want to adjust the fallback ui depending on passing props.

const MySuspendedComp = (props) => {
  const { data } = useSuspenseQuery(...);

  return <>...</>;
};


export default Suspense.with({ fallback: (props) => <FallbackWithProps {...props} /> }, MySuspendedComp);

// of course, also possible to pass component as `ReactNode`.
// export default Suspense.with({ fallback: <Fallback /> }, MySuspendedComp);

Possible Solution

We can try to get fallback as (props) => ReactNode | ReactNode like below:
ref: source code

  with: <TProps extends ComponentProps<ComponentType> = Record<string, never>>(
    suspenseProps: PropsWithoutChildren<SuspenseProps> = {},
    Component: ComponentType<TProps>
  ) =>
    Object.assign(
      (props: TProps) => {
        const { fallbackProp, ...rest } = suspenseProps;

        const fallback =
          typeof fallbackProp === 'function'
            ? fallbackProp(props)
            : fallbackProp;

        return (
          <Suspense {...rest} fallback={fallback}>
            <Component {...props} />
          </Suspense>
        );
      },
      {
        displayName: `Suspense.with(${
          Component.displayName || Component.name || 'Component'
        })`,
      }
    ),

etc.

No response

[coauthors]

People can be co-author:

Candidate	Reasons	Count	Add this as commit message
@ojj1123	#1799	1	Co-authored-by: ojj1123 <33178048+ojj1123@users.noreply.github.com>