<commit_before>react-native-listener
=====================

> A utility component to allow easy access to browser native events.

## Why?

React's uses [event delegation](https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#under-the-hood-autobinding-and-event-delegation)
with a single event listener on `document`. While this is great if your entire application is inside React,
it's not so great if your React component is inserted into a page containing other event listeners. If an
event happens inside your React component, _**your component will be the last to hear of the event**_.
[Here is a JsFiddle to demonstrate](http://jsfiddle.net/erikras/bL5br9nb/).

If your problem is that you need to stop events leaking out of your React component to the rest of the page,
`<NativeListener>` is the solution.

## Installation

In your project dir:

```shell
npm install --save react-native-listener
```

## Usage

In your JSX file, simply wrap the element (only one!) you want to listen to with `<NativeListener>` and
put your event listener properties (e.g. `onClick`) on `<NativeListener>` instead of on your element.

So, instead of this...

```js
var MyComponent = React.createClass({
  render: function() {
    return (
      <div>
        <button onClick={this.onButtonClick}>Click Me!</button>
      </div>
      );
  }
});
```
...do this...

```js
var NativeListener = require('react-native-listener');
var MyComponent = React.createClass({
  render: function() {
    return (
      <div>
        <NativeListener onClick={this.onButtonClick}>
          <button>Click Me!</button>
        </NativeListener><commit_msg>changed readme language to jsx<commit_after>react-native-listener
=====================

> A utility component to allow easy access to browser native events.

## Why?

React's uses [event delegation](https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#under-the-hood-autobinding-and-event-delegation)
with a single event listener on `document`. While this is great if your entire application is inside React,
it's not so great if your React component is inserted into a page containing other event listeners. If an
event happens inside your React component, _**your component will be the last to hear of the event**_.
[Here is a JsFiddle to demonstrate](http://jsfiddle.net/erikras/bL5br9nb/).

If your problem is that you need to stop events leaking out of your React component to the rest of the page,
`<NativeListener>` is the solution.

## Installation

In your project dir:

```shell
npm install --save react-native-listener
```

## Usage

In your JSX file, simply wrap the element (only one!) you want to listen to with `<NativeListener>` and
put your event listener properties (e.g. `onClick`) on `<NativeListener>` instead of on your element.

So, instead of this...

```jsx
/** @jsx React.DOM */
var MyComponent = React.createClass({
  render: function() {
    return (
      <div>
        <button onClick={this.onButtonClick}>Click Me!</button>
      </div>
      );
  }
});
```
...do this...

```jsx
/** @jsx React.DOM */
var NativeListener = require('react-native-listener');
var MyComponent = React.createClass({
  render: function() {
    return (
      <div>
        <NativeListener onClick={this.onButtonClick}>
          <button>Click Me!</button>
        </NativeListener>
{'fraction_non_alphanumeric': 0.12444179815421257, 'fraction_numerical': 0.0011908306043465317, 'mean_word_length': 3.8484848484848486, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 29, 'https://': 2, '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': '2783464', 'n_tokens_mistral': 966, 'n_tokens_neox': 933, 'n_words': 367}