Event Modifiers for JSX
This babel plugin adds some syntactic sugar to JSX.
Usage:
npm i babel-plugin-jsx-event-modifiers -D
or
yarn add babel-plugin-jsx-event-modifiers -D
Then add jsx-event-modifiers
to your .babelrc
file under plugins
example .babelrc:
Event Modifiers
Example:
{ return <input onKeyup:up=thismethodForPressingUp onKeyup:down=thismethodForPressingDown onKeyup:bare-shift-enter=thismethodOnlyOnShiftEnter onKeyup:bare-alt-enter=thismethodOnlyOnAltEnter /> }
will be transpiled into:
{ return <input ... on: keyup: { if !'button' in $event && this return null this } { if !'button' in $event && this return null this } { if $eventctrlKey && $eventaltKey && $eventmetaKey || !$eventshiftKey || !'button' in $event && this return null this } { if $eventctrlKey && $eventshiftKey && $eventmetaKey || !$eventaltKey || !'button' in $event && this return null this } /> }
Vue Event Modifiers as we can. The only difference today is support for bare modifier and syntax.
We try to keep API and behaviour as close toExample:
Vue template:
JSX:
<input onKeyup:up=thismethodForPressingUp onKeyup:down=thismethodForPressingDown onKeyup:bare-shift-enter=thismethodOnlyOnShiftEnter onKeyup:bare-alt-enter=thismethodOnlyOnAltEnter onKeyup:k120= this/>
Notable differences:
- Modifiers are prefixed by
:
and separated by-
(in vue: prefixed by.
and separated by.
) - Key codes are prefixed by
k
- Call expression should be wrapped in arrow functions