react-component-error-boundary

A lightweight, reusable Error Boundary for React components that follows clean component design principles.

Installation

npm install react-component-error-boundary

Basic Usage

import { ErrorBoundary } from "react-component-error-boundary";

<ErrorBoundary customErrorMessage="Something went wrong">
  <YourComponent />
</ErrorBoundary>;

Custom Error UI

<ErrorBoundary fallback={<div>Custom Error UI</div>}>
  <YourComponent />
</ErrorBoundary>

Props API

interface ErrorBoundaryProps {
  children: React.ReactNode;
  customErrorMessage?: string;
  fallback?: React.ReactNode;
}

Why this package?

React Error Boundaries often become:

• tightly coupled
• hard to reuse
• mixed with UI logic

This package keeps it simple and flexible:

• Parent owns state
• Child only renders
• Error UI is fully customizable