Skip to content
💊 Your go-to, prescribed, error-boundary component for React
Branch: master
Clone or download
Latest commit 7535d81 Feb 25, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src use microbundle Jan 24, 2019
test improve README Feb 25, 2019
.babelrc Initial Commit Oct 15, 2017
LICENSE improve README Feb 25, 2019
package.json v1.0.2 Feb 25, 2019
yarn.lock add yarn Jan 24, 2019

<Eitherx />

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

bundle size tested with jest PRs welcome MIT License


$ npm i --save eitherx
import Either from 'eitherx'

// Wrapper-component Style
  {/* Either . . . */}
  <p>"Happy Child 😄"</p>
  {/* Or . . . */}
  <p>"Error child ☹️ (but at least your UI is happy)"</p>

// OR use the `render` and `catchError` props

// Render-prop Style
  render={() => (<p>"Happy Child 😄"</p>)}
  catchError={({ error }) => (
      <p>{`Error: ${error}`}</p>

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 field error set, 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.

  handleError={({ error, info }) => {
  render={() => <Component>"Render Prop"</Component>}
  catchError={() => <p>"Catch Prop"</p>}
You can’t perform that action at this time.