react-onenterkeydown
v2.2.0
Published
React higher order component for adding onEnterKeyDown to input components
Downloads
254
Maintainers
Readme
react-onenterkeydown
React to enter key down events higher order component
DEPRECATED
This was originally used in a personal project along with other HoCs. However, with the realease of hooks, HoCs have become much less useful and this one in particular is very redundant and pointless to maintain. Please replace by a higher order function as follows:
const ifEnter = func => e => {
if (e.which === 13) func(e);
}
import { ifElse, propEq, always } from 'ramda';
// or even more concise, with something like ramda
const ifEnter = func => ifElse(propEq('which', 13), func, always(null));
Live demo
You can see the simplest demo here: Live demo
Install
$ npm install --save react-onenterkeydown
Examples
Run examples:
cd examples
npm install
npm start
Usage
react-onenterkeydown
adds an onEnterKeyDown
prop to a component with supports onKeyDown
property, such as the html input
component:
import React, { propTypes } from 'react';
import onEnter from 'react-onenterkeydown';
const logEnter = () => {
console.log('The enter key has been pressed');
}
const EnhancedInput = onEnter("input");
const () => (
<EnhancedInput onEnterKeyDown={logEnter} />
)
If onKeyDown
is passed in addition to onEnterKeyDown
, it will execute as well after the enter event.
Props
onEnterKeyDown
Type: function
, default: undefined
Defines an event handler for when the enter key is pressed on the wrapped component
TODO
- Beter design on example
License
See the LICENSE file for license rights and limitations (MIT).