<EitheRx />
Super simple, reusable binary error boundaries for React. Your go-to, prescribed, error-boundary helper.
Usage
$ npm i --save eitherx
import Either from 'eitherx'
// Wrapper-component Style
<Either>
{/* Either . . . */}
<p>"Happy Child 😄"</p>
{/* Or . . . */}
<p>"Error child â˜¹ï¸ (but at least your UI is happy)"</p>
</Either>
// OR use the `render` and `catchError` props
// Render-prop Style
<Either
render={() => (<p>"Happy Child 😄"</p>)}
catchError={({ error, info }) => (
<div>
<p>{`Info: ${info}`}</p>
<p>{`Error: ${error}`}</p>
</div>
)}
/>
Wrapper Component Style
Eitherx
either renders the first child component, unless an error occurred while rendering, then the second child is rendered. Easy enough 😄.
If you do not pass a second child, and an error occurs, null
will be return to React to render.
Render-prop Style
Using this style, you must pass a function for both render
and catchError
. If an error occurs, the component
returned from catchError
will be rendered. Otherwise Eitherx
will render the component returned from render
.
The catchError
function receives an object with the fields error
and info
, both of which are passed directly from
React Error Boundaries.
Handling Errors
With either style, you can pass an handleError
callback prop to add additional error handling, logging, etc. This also allows you to
filter certain errors by returning false from handleError
as well.
Example
<Eitherx
handleError={({ error, info }) => {
console.log(info)
console.error(error)
}}
render={() => (<Component>"Render Prop"</Component>)}
catchError={() => (<p>"Catch Prop"</p>)}
/>
Top comments (0)