JSPM – babel-plugin-jsx-event-modifiers@1.0.3

Package Exports

babel-plugin-jsx-event-modifiers

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-plugin-jsx-event-modifiers) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Event Modifiers for JSX

This babel plugin adds some syntactic sugar to JSX.

Usage:

npm i babel-plugin-jsx-event-modifiers -D

yarn add babel-plugin-jsx-event-modifiers -D

Then add jsx-event-modifiers to your .babelrc file under plugins

example .babelrc (for vue):

{
  "presets": ["es2015"],
  "plugins": ["jsx-event-modifiers", "transform-vue-jsx"]
}

example .babelrc (for react):

{
  "presets": [
    "es2015",
    "react"
  ],
  "plugins": ["jsx-event-modifiers"]
}

Event Modifiers

Example:

export default {
  render () {
    return (
      <input
        onKeyUp:up={this.methodForPressingUp}
        onKeyUp:down={this.methodForPressingDown}
      />
    )
  }
}

will be transpiled into:

export default {
  render () {
    return (
      <input
        onKeyUp={event => {
          if (event.charCode === 38)
            this.methodForPressingUp(event);

          if (event.charCode === 40)
            this.methodForPressingDown(event);
        }} />
    );
  }
}

API:

Modifier	Description
`:stop`	executes `event.stopPropagation()`
`:prevent`	executes `event.preventDefault()`
`:k{keyCode}`	checks for the `keyCode`
`:{keyAlias}`	checks for the `keyCode` that is assigned to this `keyAlias`

Stop

event.stopPropagation() is called before the expression

Example:

export default {
  render () {
    return (
      <div>
        <a href="/" onClick:stop />
        <a href="/" onClick:stop={this.method} />
      </div>
    )
  }
}

is transpiled to:

export default {
  render () {
    return (
      <div>
        <a href="/" onClick={event => {
          event.stopPropagation();
        }} />
        <a href="/" onClick={event => {
          event.stopPropagation();
          this.method(event);
        }} />
      </div>
    );
  }
}

Prevent

event.preventDefault() is called before the expression

Example:

export default {
  render () {
    return (
      <div>
        <a href="/" onClick:prevent />
        <a href="/" onClick:prevent={this.method} />
      </div>
    )
  }
}

is transpiled to:

export default {
  render () {
    return (
      <div>
        <a href="/" onClick={event => {
          event.preventDefault();
        }} />
        <a href="/" onClick={event => {
          event.preventDefault();
          this.method(event);
        }} />
      </div>
    );
  }
}

KeyCode

event.charCode is compared to the keyCode

Example:

export default {
  render () {
    return <input onKeyUp:k13={this.method} />
  }
}

is transpiled to:

export default {
  render () {
    return (
      <input onKeyUp={event => {
        if (event.charCode === 13)
          this.method(event);
      }} />
    );
  }
}

KeyAlias

There is a predefined list of aliases for keycodes:

const aliases = {
  esc: 27,
  tab: 9,
  enter: 13,
  space: 32,
  up: 38,
  left: 37,
  right: 39,
  down: 40,
  'delete': [8, 46]
}

Example:

export default {
  render () {
    return <input onKeyUp:enter={this.method} />
  }
}

is transpiled to:

export default {
  render () {
    return (
      <input onKeyUp={event => {
        if (event.charCode === 13)
          this.method(event);
      }} />
    );
  }
}

You can combine them:

Example:

export default {
  render () {
    return <input
      onKeyUp:enter={this.method}
      onKeyUp:k60={this.otherMethod} />
  }
}

is transpiled to:

export default {
  render () {
    return (
      <input
        onKeyUp={event => {
          if (event.charCode === 13)
            this.method(event);

          if (event.charCode === 60)
            this.otherMethod(event);
        }} />
    );
  }
}