https://github.com/mfix22/eitherx

:pill: Your go-to, prescribed, error-boundary component for React
https://github.com/mfix22/eitherx

binary boundaries either error-boundaries express render-prop wrapper-component

Last synced: about 2 months ago
JSON representation

:pill: Your go-to, prescribed, error-boundary component for React

• Host: GitHub
• URL: https://github.com/mfix22/eitherx
• Owner: mfix22
• License: mit
• Created: 2017-10-15T20:02:37.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T08:19:48.000Z (about 2 years ago)
• Last Synced: 2024-05-21T11:35:15.041Z (7 months ago)
• Topics: binary, boundaries, either, error-boundaries, express, render-prop, wrapper-component
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/eitherx
• Size: 230 KB
• Stars: 91
• Watchers: 3
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ``

:pill: Super simple, reusable either-or [error boundaries][react-error-docs] for React. Your go-to, prescribed, error-boundary component.

[![bundle size](https://badgen.net/bundlephobia/min/eitherx)](https://bundlephobia.com/result?p=eitherx)

[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)

[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)

[![MIT License](https://img.shields.io/github/license/mfix22/eitherx.svg)](https://github.com/mfix22/eitherx/blob/master/LICENSE)

## Usage

```shell

$ npm i --save eitherx

```

```javascript

import Either from 'eitherx'

// Wrapper-component Style

  {/* Either . . . */}

  
"Happy Child 😄"

  {/* Or . . . */}

  
"Error child ☹️ (but at least your UI is happy)"


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

// Render-prop Style

 (
"Happy Child 😄"
)}

  catchError={({ error }) => (

    


      
{`Error: ${error}`}

    

  )}

/>

```


### 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][react-error-docs-target].

[react-error-docs]: https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

[react-error-docs-target]: https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html#introducing-error-boundaries

### Handling Errors

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

##### Example

```javascript

 {

    console.log(info)

    console.error(error)

  }}

  render={() => "Render Prop"}

  catchError={() => 
"Catch Prop"
}

/>

```