<commit_before># react-keydown
> Lightweight keydown wrapper for React components.

Use react-keydown as a higher-order component or decorator to pass keydown
events to the wrapped component. Good for implementing keyboard navigation or
other shortcuts.

One of the main advantages of this library is that it only passes events
into the component when the user appears to be active inside the DOM elements
corresponding to that component and its children.

## Install

```
npm install --save react-keydown
```

## Use

```jsx
import React from 'react';
import keydown from 'react-keydown';

class MyComponent extends React.Component {

  constructor( props ) {
    super( props );
  }

  componentWillReceiveProps( { keydown } ) {
    if ( keydown.event ) {
      // do something with the keydown event
      console.log( keydown.event.which );
    }
  }

  render() {
    return (
      <div>keydown events will only get passed down after this DOM node mounts or is clicked on</div>
    );
  }
}

export default keydown( MyComponent );
```

#### Use ES7/2016 decorator pattern via Babel:

```javascript
@keydown
class MyComponent extends React.Component {
  ...
}

export default MyComponent;
```

#### Monitor only key codes `which` you care about:

```javascript
const KEYS = [
  38, // up
  40, // down
  13  // enter
];

@keydown( KEYS )
class MyComponent extends React.Component {
  ...
}
```
Or no need for an array:
```javascript
@keydown( 13 ) // just the enter key
```

## Questions

Why is this so limited, only working on `keydown` and such?

> I published this out of my particular need on a project. If anyone else ever
arrives here and needs something else let me know via issues or a pull request.

<commit_msg>Add coming up to documentation<commit_after># react-keydown
> Lightweight keydown wrapper for React components.

Use react-keydown as a higher-order component or decorator to pass keydown
events to the wrapped component. Good for implementing keyboard navigation or
other shortcuts.

One of the main advantages of this library is that it only passes events
into the component when the user appears to be active inside the DOM elements
corresponding to that component and its children.

## Install

```
npm install --save react-keydown
```

## Use

```jsx
import React from 'react';
import keydown from 'react-keydown';

class MyComponent extends React.Component {

  constructor( props ) {
    super( props );
  }

  componentWillReceiveProps( { keydown } ) {
    if ( keydown.event ) {
      // do something with the keydown event
      console.log( keydown.event.which );
    }
  }

  render() {
    return (
      <div>keydown events will only get passed down after this DOM node mounts or is clicked on</div>
    );
  }
}

export default keydown( MyComponent );
```

#### Use ES7/2016 decorator pattern via Babel:

```javascript
@keydown
class MyComponent extends React.Component {
  ...
}

export default MyComponent;
```

#### Monitor only key codes `which` you care about:

```javascript
const KEYS = [
  38, // up
  40, // down
  13  // enter
];

@keydown( KEYS )
class MyComponent extends React.Component {
  ...
}
```
Or no need for an array:
```javascript
@keydown( 13 ) // just the enter key
```

## Coming Up

Decorate class methods to assign keys to them:
```javascript
class MyComponent extends React.Component {
  ...

  @keydown( 13 )
  submit() {
    // triggered by pressing enter
  }
}
```

## Questions

Why is this so limited, only working on `keydown` and such?

> I published this out of my particular need on a project. If anyone else ever
arrives here and needs something else let me know via issues or a pull request.


{'fraction_non_alphanumeric': 0.09202286958889191, 'fraction_numerical': 0.007623196297304655, 'mean_word_length': 3.421179302045728, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3966597', 'n_tokens_mistral': 1087, 'n_tokens_neox': 1022, 'n_words': 460}