react-bootstrap-hoc-error

HOC to display errors related to a component. Shows stack trace details.

Installation

$ npm install --save react-bootstrap-hoc-error

Usage

With decorators

import React from 'react';
import errorHOC from 'react-bootstrap-hoc-error');

@errorHOC()
class MyComponent extends React.Component {
  render() {
    return (
      <div>
        {this.renderError()}
      </div>
    )
  }
}

<MyComponent> // <div></div>
<MyComponent error="An error"> // <div><ErrorComponent error="An error"></div>

Learn more about the default ErrorComponent

Changing the default ErrorComponent

errorHOC.setDefaultErrorComponent(({ error }) => <span>{error}</span>);

<MyComponent error="An error"> // <div><span>An error</span></div>

Using a custom ErrorComponent in a specific Component

@errorHOC({ ErrorComponent: ({ error }) => <span>{error}</span> })
class MyComponent extends React.Component { ... }

<MyComponent error="An error"> // <div><span>An error</span></div>

Using a custom error property name

@errorHOC({ errorPropName: 'myProp' })
class MyComponent extends React.Component { ... }

<MyComponent error="An error"> // <div></div>
<MyComponent myProp="An error"> // <div><ErrorComponent error="An error" /></div>

displayName

The displayName of the extended component will be preserved unless the fullDisplayName option is passed

@errorHOC()
class MyComponent extends React.Component { ... }
MyComponent.displayName === 'MyComponent';


@errorHOC({ fullDisplayName: true })
class MyComponent extends React.Component { ... }
MyComponent.displayName === 'Error(MyComponent)';