diff --git a/packages/react/src/ErrorBoundary.en.mdx b/packages/react/src/ErrorBoundary.en.mdx index a7d4ce2b3..b8ec2c519 100644 --- a/packages/react/src/ErrorBoundary.en.mdx +++ b/packages/react/src/ErrorBoundary.en.mdx @@ -50,11 +50,39 @@ const ErrorAfter4s = () => { :::tip +## Define component as ``'s fallback + +### ErrorBoundaryFallbackProps + +If you want to deliver a declared component as ``'s fallback, you can use the `ErrorBoundaryFallbackProps` type to declare the component easily. + +```tsx +import type { ErrorBoundaryFallbackProps } from '@suspensive/react' + +const ErrorBoundaryFallback = ({ reset, error }: ErrorBoundaryFallbackProps) => ( + <> + + {error.message} + +) + +const Example = () => ( + + + +) +``` + +::: + +:::tip + ## Use `` fallback props without prop drilling ### useErrorBoundaryFallbackProps -In fallback of ``, by calling useErrorBoundaryFallbackProps().reset/error, we can use error of `` and reset it without using prop directly +If component using `reset` method and `error` object is nested, prop drilling cannot be avoided. +The `useErrorBoundaryFallbackProps` allows you to access the `reset` method and `error` objects without prop drilling. ```tsx import { ErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react' @@ -70,7 +98,9 @@ const Nested = () => { ) } +// There's no need to pass fallback Prop here! const ErrorBoundaryFallback = () => + const Example = () => ( diff --git a/packages/react/src/ErrorBoundary.ko.mdx b/packages/react/src/ErrorBoundary.ko.mdx index 203a7d531..80e4b7d85 100644 --- a/packages/react/src/ErrorBoundary.ko.mdx +++ b/packages/react/src/ErrorBoundary.ko.mdx @@ -50,11 +50,39 @@ const ErrorAfter4s = () => { :::tip +## ``'의 fallback로 전달할 컴포넌트 정의하기 + +### ErrorBoundaryFallbackProps + +``'의 fallback으로 컴포넌트를 전달하고 싶다면 `ErrorBoundaryFallbackProps` 타입을 활용해 쉽게 컴포넌트를 선언 할 수 있습니다. + +```tsx +import type { ErrorBoundaryFallbackProps } from '@suspensive/react' + +const ErrorBoundaryFallback = ({ reset, error }: ErrorBoundaryFallbackProps) => ( + <> + + {error.message} + +) + +const Example = () => ( + + + +) +``` + +::: + +:::tip + ## `` fallback props을 prop drilling 없이 사용하기 ### useErrorBoundaryFallbackProps -ErrorBoundaryFallback에서 useErrorBoundaryFallbackProps().reset/error을 사용해 prop을 직접 사용하지 않고도 ``을 reset하고 error를 사용할 수 있습니다. +`error` 객체와 `reset` 메소드을 사용하려는 컴포넌트가 중첩되면 prop drilling을 피할 수 없습니다. +이 때, `useErrorBoundaryFallbackProps`을 통해, prop drilling 없이 `reset` 메소드와 `error` 객체에 접근할 수 있습니다. ```tsx import { ErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react' @@ -70,7 +98,9 @@ const Nested = () => { ) } +// 여기서 fallbackProp 을 전달할 필요가 없어집니다! const ErrorBoundaryFallback = () => + const Example = () => (