advise(react/errorboundary): add & change example case (#221)

* docs(errorboundary): change & add example case for ErrorBoundary * docs(react/errorboundary): change & add example case to ErrorBoundary (en) * docs(react): suggestion to advise/useErrorBoundaryProps (#227) * Update ErrorBoundary.ko.mdx Co-authored-by: Jonghyeon Ko <[email protected]> * Update ErrorBoundary.en.mdx Co-authored-by: Jonghyeon Ko <[email protected]> --------- Co-authored-by: Jonghyeon Ko <[email protected]>
toss · Oct 15, 2023 · 90da45f · 90da45f
1 parent 9d739d6
commit 90da45f
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 2 deletions.
diff --git a/packages/react/src/ErrorBoundary.en.mdx b/packages/react/src/ErrorBoundary.en.mdx
@@ -50,11 +50,39 @@ const ErrorAfter4s = () => {
 
 :::tip
 
+## Define component as `<ErrorBoundary/>`'s fallback
+
+### ErrorBoundaryFallbackProps
+
+If you want to deliver a declared component as `<ErrorBoundary/>`'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) => (
+  <>
+    <button onClick={reset}>reset</button>
+    {error.message}
+  </>
+)
+
+const Example = () => (
+  <ErrorBoundary fallback={ErrorBoundaryFallback}>
+    <ErrorAfter4s />
+  </ErrorBoundary>
+)
+```
+
+:::
+
+:::tip
+
 ## Use `<ErrorBoundary/>` fallback props without prop drilling
 
 ### useErrorBoundaryFallbackProps
 
-In fallback of `<ErrorBoundary/>`, by calling useErrorBoundaryFallbackProps().reset/error, we can use error of `<ErrorBoundary/>` 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 = () => <Nested />
+
 const Example = () => (
   <ErrorBoundary fallback={ErrorBoundaryFallback}>
     <Error />

diff --git a/packages/react/src/ErrorBoundary.ko.mdx b/packages/react/src/ErrorBoundary.ko.mdx
@@ -50,11 +50,39 @@ const ErrorAfter4s = () => {
 
 :::tip
 
+## `<ErrorBoundary/>`'의 fallback로 전달할 컴포넌트 정의하기
+
+### ErrorBoundaryFallbackProps
+
+`<ErrorBoundary/>`'의 fallback으로 컴포넌트를 전달하고 싶다면 `ErrorBoundaryFallbackProps` 타입을 활용해 쉽게 컴포넌트를 선언 할 수 있습니다.
+
+```tsx
+import type { ErrorBoundaryFallbackProps } from '@suspensive/react'
+
+const ErrorBoundaryFallback = ({ reset, error }: ErrorBoundaryFallbackProps) => (
+  <>
+    <button onClick={reset}>reset</button>
+    {error.message}
+  </>
+)
+
+const Example = () => (
+  <ErrorBoundary fallback={ErrorBoundaryFallback}>
+    <ErrorAfter4s />
+  </ErrorBoundary>
+)
+```
+
+:::
+
+:::tip
+
 ## `<ErrorBoundary/>` fallback props을 prop drilling 없이 사용하기
 
 ### useErrorBoundaryFallbackProps
 
-ErrorBoundaryFallback에서 useErrorBoundaryFallbackProps().reset/error을 사용해 prop을 직접 사용하지 않고도 `<ErrorBoundary/>`을 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 = () => <Nested />
+
 const Example = () => (
   <ErrorBoundary fallback={ErrorBoundaryFallback}>
     <Error />