React Diagnostics

Enhance your React component development experience with diagnostic logging.

Installation

npm install --save-dev react-diagnostics

Usage

Simple Diagnostics

Use withDiagnostics.simple() for basic diagnostic logging.

import withDiagnostics from "react-diagnostics";

const MyComponent = (props) => {
  // Your component logic here
};

export default withDiagnostics.simple(MyComponent);

Detailed Diagnostics

For more detailed diagnostics, use withDiagnostics.detailed().

import withDiagnostics from "react-diagnostics";

const MyComponent = (props) => {
  // Your component logic here
};

export default withDiagnostics.detailed(MyComponent);

Custom Configuration

Customize the diagnostics behavior with withDiagnostics.config().

import withDiagnostics from "react-diagnostics";

const MyComponent = (props) => {
  // Your component logic here
};

const customConfig = {
  logPropsSize: true,
  logExecutionTime: true,
  devModeOnly: true,
};

export default withDiagnostics.config(customConfig)(MyComponent);

Example

Check out the "demo" folder in this repository. Run npm start, and open the console to see the logs in action.

License

Copyright @Jarrett Huang, under the MIT License.