@hocs/with-callback-on-change

0.3.1 • Public • Published

🔔 with-callback-on-change

npm ci coverage deps

Part of a collection of Higher-Order Components for React, especially useful with Recompose.

Invokes a callback on prop change, useful to decouple side effects like onChange handler in a declarative way.

Install

yarn add @hocs/with-callback-on-change

Usage

withCallbackOnChange(
  propName: string,
  callback: (props: Object) => void
): HigherOrderComponent
import React from 'react';
import { compose, withState, withHandlers } from 'recompose';
import withCallbackOnChange from '@hocs/with-callback-on-change';

const Demo = ({ count, onButtonClick }) => (
  <div>
    <h1>{count}</h1>
    <button onClick={onButtonClick}>increment</button>
  </div>
);

export default compose(
  withState('count', 'setCount', 0),
  withHandlers({
    onButtonClick: ({ setCount, count }) => () => setCount(count + 1)
  }),
  withCallbackOnChange('count', ({ count }) => console.log(count))
)(Demo);

📺 Check out live demo.

Package Sidebar

Install

npm i @hocs/with-callback-on-change

Weekly Downloads

67

Version

0.3.1

License

MIT

Unpacked Size

10.8 kB

Total Files

5

Last publish

Collaborators

  • hocs