# ractive-events-keys

> Key events plugin for Ractive.js

Latest version **0.2.1** (published 2015-04-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install ractive-events-keys
pnpm add ractive-events-keys
yarn add ractive-events-keys
bun add ractive-events-keys
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2015-04-11 |
| First published | 2014-09-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Rich Harris |
| Maintainers | rich_harris |

## Links

- npm: https://www.npmjs.com/package/ractive-events-keys
- Repository: https://github.com/ractivejs/ractive-events-keys
- Issues: https://github.com/ractivejs/ractive-events-keys/issues
- npm.io page: https://npm.io/package/ractive-events-keys

## Recent versions

- 0.2.1 (latest) — 2015-04-11
- 0.2.0 — 2015-04-11
- 0.1.2 — 2014-09-30

## README

# ractive-events-keys

*Find more Ractive.js plugins at [ractivejs.org](http://docs.ractivejs.org/latest/plugins)*

Listen for specific keypresses - `enter`, `tab`, `escape`, `space`, `leftarrow`, `uparrow`, `rightarrow`, `downarrow` - on DOM elements.

```html
<input on-tab='submitAndMoveOn()' on-escape='revertEdit()'>
```


## Installation

Install from npm...

```bash
npm install ractive-events-keys
```

...or download it and add it as a script tag to your page:

```html
<script src='ractive.js'></script> <!-- must go first! -->
<script src='ractive-events-keys.js'></script>
```


## Use as a module...

**Note: previous versions of this plugin would 'self-register'. If you are using a module system such as Browserify, Webpack or RequireJS, that's no longer the case - you must explicitly register the plugin.**


### CommonJS

```js
var Ractive = require( 'ractive' );
var keys = require( 'ractive-events-keys' );

// To use the plugin with a specific instance
var ractive = new Ractive({
  el: 'body',
  template: myTemplate,
  events: {
    // just include the ones you need
    escape: keys.escape,
    scape: keys.space
  }
});

// To use it with components
MyComponent = Ractive.extend({
  template: componentTemplate,
  events: {
    escape: keys.escape,
    scape: keys.space
  }
});

// To make handlers globally available to *all* instances
Ractive.events.space = keys.space;
Ractive.events.escape = keys.escape;
```


### AMD

```js
define([ 'ractive', 'ractive-events-keys' ], function ( Ractive, keys ) {
  var ractive = new Ractive({
    el: 'body',
    template: myTemplate,
    events: {
      escape: keys.escape,
      scape: keys.space
    }
  });
});
```


### ES6

```js
import Ractive from 'ractive';
import { escape, space } from 'ractive-events-keys';

var ractive = new Ractive({
  el: 'body',
  template: myTemplate,
  events: { escape, space }
});
```


## Use as a `<script>` tag

If you include ractive-events-keys as a script tag, it will 'self-register' with the global `Ractive` object, and all Ractive instances will be able to use its handlers.



## License

MIT

---
_Source: https://npm.io/package/ractive-events-keys · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._