💊 Super simple, reusable either-or error boundaries for React. Your go-to, prescribed, error-boundary component.

$ 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 }) => (
    <div>
      <p>{`Error: ${error}`}</p>
    </div>
  )}
/>

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.

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 field error set, both of which are passed directly from React Error Boundaries.

With either style, you can pass an handleError callback prop to add additional error handling, logging, etc.

<Eitherx
  handleError={({ error, info }) => {
    console.log(info)
    console.error(error)
  }}
  render={() => <Component>"Render Prop"</Component>}
  catchError={() => <p>"Catch Prop"</p>}
/>