https://github.com/danilqa/react-props-diff-logger
📝 Helps you debug React components by logging props changes
https://github.com/danilqa/react-props-diff-logger
logger props react
Last synced: 25 days ago
JSON representation
📝 Helps you debug React components by logging props changes
- Host: GitHub
- URL: https://github.com/danilqa/react-props-diff-logger
- Owner: Danilqa
- License: mit
- Created: 2023-11-22T19:00:34.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-17T11:24:11.000Z (over 2 years ago)
- Last Synced: 2025-10-29T23:18:03.647Z (8 months ago)
- Topics: logger, props, react
- Language: TypeScript
- Homepage:
- Size: 1.19 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Helps you debug React components by logging props changes.
## Installation
```bash
npm install -D react-props-diff-logger
```
```bash
yarn add --dev react-props-diff-logger
```
```bash
pnpm add -D react-props-diff-logger
```
## Usage
### Basic Usage
Wrap your component with `withPropsDiffLogger` HOC:
```tsx
import { PropsDiffLogger } from 'react-props-diff-logger';
import { MyComponent as _MyComponent } from '../../components/my-component';
const MyComponent = withPropsDiffLogger(_MyComponent);
function App() {
return (
// ...
// ...
);
}
```
### Usage with Memoized Components
If you have a memoized component, you should wrap `withPropsDiffLogger` with `memo` in the same way:
```tsx
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:
```ts
const MyComponent = withPropsDiffLogger(_MyComponent, 'MyCustomName');
```
Support the project by giving it a star! ⭐