Switch branches/tags
with-view-layout-props@0.2.0 with-view-layout-props@0.1.3 with-view-layout-props@0.1.2 with-view-layout-props@0.1.1 with-view-layout-props@0.1.0 with-resize-observer-props@0.5.0 with-resize-observer-props@0.4.1 with-resize-observer-props@0.4.0 with-resize-observer-props@0.3.1 with-resize-observer-props@0.3.0 with-resize-observer-props@0.2.0 with-resize-observer-props@0.1.0 with-page-visibility-props@0.4.0 with-page-visibility-props@0.3.0 with-page-visibility-props@0.2.0 with-page-visibility-props@0.1.0 with-online-status-props@0.3.0 with-online-status-props@0.2.0 with-online-status-props@0.1.1 with-online-status-props@0.1.0 with-match-media-props@0.4.0 with-match-media-props@0.3.0 with-match-media-props@0.2.0 with-match-media-props@0.1.2 with-match-media-props@0.1.1 with-match-media-props@0.1.0 with-log@0.5.0 with-log@0.4.0 with-log@0.3.0 with-log@0.2.0 with-log@0.1.0 with-lifecycle@0.5.0 with-lifecycle@0.4.0 with-lifecycle@0.3.0 with-lifecycle@0.2.0 with-lifecycle@0.1.1 with-lifecycle@0.1.0 with-intersection-observer-props@0.5.0 with-intersection-observer-props@0.4.0 with-intersection-observer-props@0.3.0 with-intersection-observer-props@0.2.0 with-intersection-observer-props@0.1.0 with-debugger@0.4.0 with-debugger@0.3.0 with-debugger@0.2.0 with-debugger@0.1.0 with-callback-once@0.3.0 with-callback-once@0.2.0 with-callback-once@0.1.0 with-callback-on-change@0.3.0 with-callback-on-change@0.2.0 with-callback-on-change@0.1.0 with-callback-on-change-while@0.3.0 with-callback-on-change-while@0.2.0 with-callback-on-change-while@0.1.0 throttle-handler@0.5.0 throttle-handler@0.4.0 throttle-handler@0.3.0 throttle-handler@0.2.1 throttle-handler@0.1.1 throttle-handler@0.1.0 safe-timers@0.4.0 safe-timers@0.3.0 safe-timers@0.2.0 safe-timers@0.1.0 prevent-handlers-default@0.4.0 prevent-handlers-default@0.3.0 prevent-handlers-default@0.2.1 prevent-handlers-default@0.1.0 omit-props@0.4.0 omit-props@0.3.0 omit-props@0.2.1 omit-props@0.1.1 omit-props@0.1.0 debounce-handler@0.5.0 debounce-handler@0.4.1 debounce-handler@0.4.0 debounce-handler@0.3.0 debounce-handler@0.2.1 debounce-handler@0.1.1 debounce-handler@0.1.0
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
demo
src
test
package.json
readme.md

readme.md

🔔 with-callback-once

npm ci coverage deps

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

Invokes a callback once condition is true (while previous check was false), useful to decouple side effects like onSuccess or onError handlers in a declarative way.

Install

yarn add @hocs/with-callback-once

Usage

withCallbackOnce(
  shouldCall: (props: Object) => boolean,
  callback: (props: Object) => void
): HigherOrderComponent
import React from 'react';
import { compose, withState, withHandlers } from 'recompose';
import withCallbackOnChangeWhile from '@hocs/with-callback-on-change-while';
import withCallbackOnce from '@hocs/with-callback-once';

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

export default compose(
  withState('count', 'setCount', 5),
  withHandlers({
    onButtonClick: ({ setCount, count }) => () => setCount(count - 1)
  }),
  withCallbackOnChangeWhile(
    'count',
    ({ count }) => count >= 0,
    ({ count }) => console.log(count)
  ),
  withCallbackOnce(
    ({ count }) => count === 0,
    () => console.log('done!')
  )
)(Demo);

📺 Check out live demo.