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

⛔️ prevent-handlers-default

npm ci coverage deps

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

Decouples e.preventDefault() side effect from handlers like form submitting or clicking a link.

Install

yarn add @hocs/prevent-handlers-default

Usage

preventHandlersDefault(
  ...handlers: Array<string>
): HigherOrderComponent
import React from 'react';
import { compose, withState, withHandlers } from 'recompose';
import preventHandlersDefault from '@hocs/prevent-handlers-default';

const submitAction = (value) => console.log(`Submit: ${value}`);

const Demo = ({ value, onChange, onSubmit }) => (
  <form onSubmit={onSubmit}>
    <input value={value} onChange={onChange}/>
    <button>Submit</button>
  </form>
);

export default compose(
  withState('value', 'setValue', ''),
  withHandlers({
    onChange: ({ setValue }) => (e) => setValue(e.target.value),
    onSubmit: ({ value }) => () => submitAction(value)
  }),
  preventHandlersDefault('onSubmit')
)(Demo);

📺 Check out live demo.