feat: Add errorBoundaryProps utility function

packages/react/src/ErrorBoundary.spec.tsx

@@ -5,6 +5,7 @@ import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'
 import {
   ErrorBoundary,
   type ErrorBoundaryFallbackProps,
+  errorBoundaryProps,
   useErrorBoundary,
   useErrorBoundaryFallbackProps,
 } from './ErrorBoundary'
@@ -621,3 +622,75 @@ describe('ErrorBoundary.with', () => {
     expect(ErrorBoundary.with({ fallback: () => <></> }, () => <></>).displayName).toBe('ErrorBoundary.with(Component)')
   })
 })
+
+describe('errorBoundaryProps', () => {
+  beforeEach(() => vi.useFakeTimers())
+
+  afterEach(() => {
+    vi.useRealTimers()
+    Throw.reset()
+  })
+
+  it('should return the props object passed to it', () => {
+    const props = errorBoundaryProps({
+      fallback: <div>Error</div>,
+      onError: vi.fn(),
+      onReset: vi.fn(),
+    })
+
+    expect(props).toEqual({
+      fallback: <div>Error</div>,
+      onError: expect.any(Function),
+      onReset: expect.any(Function),
+    })
+  })
+
+  it('should work with function fallback', () => {
+    const fallbackComponent = ({ error }: ErrorBoundaryFallbackProps) => <div>{error.message}</div>
+    const props = errorBoundaryProps({
+      fallback: fallbackComponent,
+    })
+
+    expect(props.fallback).toBe(fallbackComponent)
+  })
+
+  it('should preserve type inference for shouldCatch', () => {
+    const props = errorBoundaryProps({
+      fallback: <div>Error</div>,
+      shouldCatch: CustomError,
+    })
+
+    expect(props.shouldCatch).toBe(CustomError)
+  })
+
+  it('should work with resetKeys', () => {
+    const resetKeys = ['key1', 'key2']
+    const props = errorBoundaryProps({
+      fallback: <div>Error</div>,
+      resetKeys,
+    })
+
+    expect(props.resetKeys).toEqual(resetKeys)
+  })
+
+  it('should integrate with ErrorBoundary component', async () => {
+    const onError = vi.fn()
+    const props = errorBoundaryProps({
+      fallback: (props) => <>{props.error.message}</>,
+      onError,
+    })
+
+    render(
+      <ErrorBoundary {...props}>
+        <Throw.Error message={ERROR_MESSAGE} after={100}>
+          {TEXT}
+        </Throw.Error>
+      </ErrorBoundary>
+    )
+
+    expect(screen.queryByText(TEXT)).toBeInTheDocument()
+    await act(() => vi.advanceTimersByTime(100))
+    expect(screen.queryByText(ERROR_MESSAGE)).toBeInTheDocument()
+    expect(onError).toHaveBeenCalledTimes(1)
+  })
+})

packages/react/src/ErrorBoundary.test-d.tsx

@@ -1231,3 +1231,83 @@
     })
   })
 })
+
+describe('errorBoundaryProps', () => {
+  it('should return props with correct types', () => {
+    const { errorBoundaryProps } = require('./ErrorBoundary')
+
+    const props = errorBoundaryProps({
+      fallback: <div>Error</div>,
+    })
+
+    expectTypeOf(props).toMatchTypeOf<{
+      fallback: ReactNode
+    }>()
+  })
+
+  it('should preserve type inference for shouldCatch with CustomError', () => {
+    const { errorBoundaryProps } = require('./ErrorBoundary')
+
+    const props = errorBoundaryProps({
+      fallback: ({ error }: { error: CustomError; reset: () => void }) => <div>{error.message}</div>,
+      shouldCatch: CustomError,
+    })
+
+    expectTypeOf(props).toMatchTypeOf<{
+      fallback: ReactNode
+      shouldCatch?: typeof CustomError
+    }>()
+  })
+
+  it('should work with function fallback that has typed error', () => {
+    const { errorBoundaryProps } = require('./ErrorBoundary')
+
+    const props = errorBoundaryProps({
+      fallback: ({ error, reset }: { error: CustomError; reset: () => void }) => (
+        <div>
+          {error.message}
+          <button onClick={reset}>Reset</button>
+        </div>
+      ),
+      shouldCatch: CustomError,
+    })
+
+    expectTypeOf(props.fallback).toMatchTypeOf<
+      ReactNode | ((props: { error: CustomError; reset: () => void }) => ReactNode)
+    >()
+  })
+
+  it('should accept all ErrorBoundary props except children', () => {
+    const { errorBoundaryProps } = require('./ErrorBoundary')
+
+    const props = errorBoundaryProps({
+      fallback: <div>Error</div>,
+      resetKeys: ['key1', 'key2'],
+      onError: (error: CustomError) => console.error(error),
+      onReset: () => console.log('reset'),
+      shouldCatch: CustomError,
+    })
+
+    expectTypeOf(props).toMatchTypeOf<{
+      fallback: ReactNode
+      resetKeys?: unknown[]
+      onError?: (error: CustomError, info: unknown) => void
+      onReset?: () => void
+      shouldCatch?: typeof CustomError
+    }>()
+  })
+
+  it('should work with array of error matchers', () => {
+    const { errorBoundaryProps } = require('./ErrorBoundary')
+
+    const props = errorBoundaryProps({
+      fallback: ({ error }: { error: Error; reset: () => void }) => <div>{error.message}</div>,
+      shouldCatch: [CustomError, (error: Error) => error instanceof Error],
+    })
+
+    expectTypeOf(props).toMatchTypeOf<{
+      fallback: ReactNode
+      shouldCatch?: [typeof CustomError, (error: Error) => boolean]
+    }>()
+  })
+})

packages/react/src/ErrorBoundary.tsx

@@ -319,3 +319,23 @@ export const useErrorBoundaryFallbackProps = <TError extends Error = Error>(): E
     [errorBoundary.error, errorBoundary.reset]
   )
 }
+
+/**
+ * This utility function is a helper for creating ErrorBoundary props with proper type inference.
+ * It simply returns the props object passed to it, but helps with type inference.
+ * @see {@link https://suspensive.org/docs/react/ErrorBoundary Suspensive Docs}
+ * @example
+ * ```tsx
+ * const errorBoundary = errorBoundaryProps({
+ *   fallback: ({ error }) => <div>{error.message}</div>,
+ *   onError: (error) => console.error(error),
+ * })
+ *
+ * <ErrorBoundary {...errorBoundary}>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ */
+export const errorBoundaryProps = <TShouldCatch extends ShouldCatch = true>(
+  props: PropsWithoutChildren<ErrorBoundaryProps<TShouldCatch>>
+) => props

packages/react/src/index.ts

@@ -1,7 +1,7 @@
 export { ClientOnly } from './ClientOnly'
 export { DefaultPropsProvider, DefaultProps } from './DefaultProps'
 export { Delay } from './Delay'
-export { ErrorBoundary, useErrorBoundary, useErrorBoundaryFallbackProps } from './ErrorBoundary'
+export { ErrorBoundary, useErrorBoundary, useErrorBoundaryFallbackProps, errorBoundaryProps } from './ErrorBoundary'
 export { ErrorBoundaryGroup, useErrorBoundaryGroup } from './ErrorBoundaryGroup'
 export { lazy, reloadOnError, createLazy } from './lazy'
 export { Suspense } from './Suspense'