https://github.com/nickmessing/babel-plugin-jsx-event-modifiers
Event modifiers syntactic sugar for JSX
https://github.com/nickmessing/babel-plugin-jsx-event-modifiers
Last synced: 7 months ago
JSON representation
Event modifiers syntactic sugar for JSX
- Host: GitHub
- URL: https://github.com/nickmessing/babel-plugin-jsx-event-modifiers
- Owner: nickmessing
- License: mit
- Created: 2017-03-26T03:58:33.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-11-06T17:19:08.000Z (about 6 years ago)
- Last Synced: 2025-05-05T11:49:18.365Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 160 KB
- Stars: 44
- Watchers: 2
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - jsx-event-modifiers - Event modifiers syntactic sugar for JSX ` 📝 3 years ago` (Utilities [🔝](#readme))
- awesome-vue-zh - JSX事件修饰符 - 一个BabelPu插件,它将类似于Vue模板的事件修改器添加到JSX中. (公用事业 / JSX)
- awesome-vue - jsx-event-modifiers - A Babel plugin that adds event modifiers similar to Vue templates to JSX. (Components & Libraries / Utilities)
- awesome-vue - jsx-event-modifiers ★44 - A Babel plugin that adds event modifiers similar to Vue templates to JSX. (Utilities / JSX)
- awesome-vue - jsx-event-modifiers - A Babel plugin that adds event modifiers similar to Vue templates to JSX. (Utilities / JSX)
README
## Event Modifiers for JSX
## DEPRECATED: Check https://github.com/vuejs/jsx instead
This babel plugin adds some syntactic sugar to JSX.
### Usage:
```bash
npm i babel-plugin-jsx-event-modifiers -D
```
or
```bash
yarn add babel-plugin-jsx-event-modifiers -D
```
Then add `jsx-event-modifiers` to your `.babelrc` file under `plugins`
example .babelrc:
```json
{
"presets": ["es2015"],
"plugins": ["jsx-event-modifiers", "transform-vue-jsx"]
}
```
#### Event Modifiers
Example:
```js
export default {
render () {
return (
)
}
}
```
will be transpiled into:
```js
export default {
render() {
return (
{
if (!('button' in $event) && this._k($event.keyCode, 'up', 38)) return null
this.methodForPressingUp($event)
},
$event => {
if (!('button' in $event) && this._k($event.keyCode, 'down', 40)) return null
this.methodForPressingDown($event)
},
$event => {
if (
($event.ctrlKey && $event.altKey && $event.metaKey) ||
!$event.shiftKey ||
(!('button' in $event) && this._k($event.keyCode, 'enter', 13))
)
return null
this.methodOnlyOnShiftEnter($event)
},
$event => {
if (
($event.ctrlKey && $event.shiftKey && $event.metaKey) ||
!$event.altKey ||
(!('button' in $event) && this._k($event.keyCode, 'enter', 13))
)
return null
this.methodOnlyOnAltEnter($event)
},
],
},
}}
/>
)
},
}
```
#### We try to keep API and behaviour as close to [Vue Event Modifiers](https://vuejs.org/v2/guide/events.html#Event-Modifiers) as we can. The only difference today is support for [bare](https://github.com/vuejs/vue/pull/5977) modifier and syntax.
##### Example:
Vue template:
```html
```
JSX:
```js
this.onPressKey120('some', 'arguments')}
/>
```
##### 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