Helps you debug React components by logging props changes.

Installation

npm install -D react-props-diff-logger

yarn add --dev react-props-diff-logger

pnpm add -D react-props-diff-logger

Usage

Basic Usage

Wrap your component with withPropsDiffLogger HOC:

import { PropsDiffLogger } from 'react-props-diff-logger';
import { MyComponent as _MyComponent } from '../../components/my-component'; 

const MyComponent = withPropsDiffLogger(_MyComponent);

function App() {
  return (
    // ...
      <MyComponent />
    // ...
  );
}

Usage with Memoized Components

If you have a memoized component, you should wrap withPropsDiffLogger with memo in the same way:

const MyComponent = memo(withPropsDiffLogger(_MyComponent), /*arePropsEqual?*/);

Name

By default, the function's name or displayName is used. To set or override the component's name, provide the second name argument:

const MyComponent = withPropsDiffLogger(_MyComponent, 'MyCustomName');

Support the project by giving it a star! ⭐