# with-prop-change-handler

Latest version **0.1.0** (published 2017-11-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install with-prop-change-handler
pnpm add with-prop-change-handler
yarn add with-prop-change-handler
bun add with-prop-change-handler
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2017-11-07 |
| First published | 2017-11-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | László Kardinál |
| Maintainers | laszlokardinal |
| Keywords | react, hoc, prop, change |

## Links

- npm: https://www.npmjs.com/package/with-prop-change-handler
- Repository: https://github.com/laszlokardinal/withPropChangeHandler
- Homepage: https://github.com/laszlokardinal/withPropChangeHandler#readme
- Issues: https://github.com/laszlokardinal/withPropChangeHandler/issues
- npm.io page: https://npm.io/package/with-prop-change-handler

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^16.0.0-alpha.12

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2017-11-07

## README

# `withPropChangeHandler()`


Higher order component for React, that calls the handler function if any of the props that are specified in the first parameter change.

If the first parameter is null, the handler will be called on every change.

The handler will be called
 * before mount with an empty object as previousProps,
 * on prop change with the next and previous props,
 * before unmount with an empty object as nextProps.

Signature:

```js
withPropChangeHandler(
  keys: Array<string> | null,
  propChangeHandler: (nextProps:Object, previousProps:Object) => void
): HigherOrderComponent
```

Usage example:

```js
const enhance = withPropChangeHandler(
  ["groupId", "userId"],
  (
    { groupId, userId, loadPosts },
    { groupId: previousGroupId, userId: previousUserId, unloadPosts }
  ) => {
    if (previousGroupId && previousUserId) {
      unloadPosts(previousGroupId, previousUserId);
    }

    if (groupId && userId) {
      loadPosts(groupId, userId);
    }
  }
);

const Posts = enhance(
  ({ posts }) =>
    posts && (
      <div>{posts.map(({ id, content }) => <div key={id}>{content}</div>)}</div>
    )
);
```

Install:

```
npm install with-prop-change-handler --save
```

---
_Source: https://npm.io/package/with-prop-change-handler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._