@hocs/prevent-handlers-default

Prevent handlers default HOC for React and React Native

Stats

StarsIssuesVersionUpdatedCreatedSize
@hocs/prevent-handlers-default
1,786180.4.03 years ago4 years agoMinified + gzip package size for @hocs/prevent-handlers-default in KB

Readme

:no_entry: 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);

:tv: Check out live demo.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.