Skip to content

Commit 35ca97a

Browse files
committed
Update README with more examples
1 parent 943a0c6 commit 35ca97a

File tree

1 file changed

+23
-2
lines changed

1 file changed

+23
-2
lines changed

README.md

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,8 @@ const ui = (
9898
### `useErrorBoundary` hook
9999
Convenience hook for imperatively showing or dismissing error boundaries.
100100

101+
#### Show the nearest error boundary from an event handler
102+
101103
React only handles errors thrown during render or during component lifecycle methods (e.g. effects and did-mount/did-update). Errors thrown in event handlers, or after async code has run, will not be caught.
102104

103105
This hook can be used to pass those errors to the nearest error boundary:
@@ -106,7 +108,7 @@ This hook can be used to pass those errors to the nearest error boundary:
106108
import { useErrorBoundary } from "react-error-boundary";
107109

108110
function Example() {
109-
const { resetBoundary, showErrorBoundary } = useErrorBoundary();
111+
const { showBoundary } = useErrorBoundary();
110112

111113
useEffect(() => {
112114
fetchGreeting(name).then(
@@ -115,7 +117,7 @@ function Example() {
115117
},
116118
error => {
117119
// Show error boundary
118-
showErrorBoundary(error);
120+
showBoundary(error);
119121
}
120122
);
121123
});
@@ -124,6 +126,25 @@ function Example() {
124126
}
125127
```
126128

129+
#### Dismiss the nearest error boundary
130+
A fallback component can use this hook to request the nearest error boundary retry the render that original failed.
131+
132+
```js
133+
import { useErrorBoundary } from "react-error-boundary";
134+
135+
function ErrorFallback({ error }) {
136+
const { resetBoundary } = useErrorBoundary();
137+
138+
return (
139+
<div role="alert">
140+
<p>Something went wrong:</p>
141+
<pre style={{ color: "red" }}>{error.message}</pre>
142+
<button onClick={resetBoundary}>Try again</button>
143+
</div>
144+
);
145+
}
146+
```
147+
127148
### `withErrorBoundary` HOC
128149
This package can also be used as a [higher-order component](https://legacy.reactjs.org/docs/higher-order-components.html) that accepts all of the same props as above:
129150

0 commit comments

Comments
 (0)