{"id":13817464,"url":"https://github.com/erikras/react-native-listener","last_synced_at":"2025-04-05T13:09:33.903Z","repository":{"id":20334251,"uuid":"23608746","full_name":"erikras/react-native-listener","owner":"erikras","description":"A utility component to allow easy access to browser native events","archived":false,"fork":false,"pushed_at":"2022-12-03T10:52:33.000Z","size":251,"stargazers_count":135,"open_issues_count":12,"forks_count":19,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-04-24T15:27:13.735Z","etag":null,"topics":["browser","browser-events","bubble","capture","event-listener","events","javascript","native-events","propagation","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erikras.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-09-03T06:13:25.000Z","updated_at":"2024-03-07T05:54:27.000Z","dependencies_parsed_at":"2023-01-13T20:55:06.145Z","dependency_job_id":null,"html_url":"https://github.com/erikras/react-native-listener","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikras%2Freact-native-listener","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikras%2Freact-native-listener/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikras%2Freact-native-listener/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikras%2Freact-native-listener/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erikras","download_url":"https://codeload.github.com/erikras/react-native-listener/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339158,"owners_count":20923014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","browser-events","bubble","capture","event-listener","events","javascript","native-events","propagation","react"],"created_at":"2024-08-04T06:00:44.739Z","updated_at":"2025-04-05T13:09:33.884Z","avatar_url":"https://github.com/erikras.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-native-listener [![npm version](https://img.shields.io/npm/v/react-native-listener.svg?style=flat)](https://www.npmjs.org/package/react-native-listener) [![npm downloads](https://img.shields.io/npm/dm/react-native-listener.svg?style=flat)](https://www.npmjs.org/package/react-native-listener)\n\n\u003e A utility component to allow easy access to browser native events.\n\n## THIS IS UNRELATED TO react-native!\n\nPlease don't confuse this library with anything to do with [React Native](https://facebook.github.io/react-native/).\nThis library is for dealing directly with _**browser**_ native events.\n\n## Why?\n\nReact's uses [event delegation](https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#under-the-hood-autobinding-and-event-delegation)\nwith a single event listener on `document`. While this is great if your entire application is inside React,\nit's not so great if your React component is inserted into a page containing other event listeners. If an\nevent happens inside your React component, _**your component will be the last to hear of the event**_. The\nevent will first propagate to all its ancestor elements on the page.\n[Here is a Codesandbox to demonstrate](https://codesandbox.io/s/n07oj17614).\n\nIf your problem is that you need to stop events leaking out of your React component to the rest of the page,\n`\u003cNativeListener\u003e` is the solution.\n\n## Installation\n\nIn your project dir:\n\n```shell\nnpm install --save react-native-listener\n```\n\n## Usage\n\nIn your JSX file, simply wrap the element (only one!) you want to listen to with `\u003cNativeListener\u003e` and\nput your event listener properties (e.g. `onClick`, `onKeyDown`) on `\u003cNativeListener\u003e` instead of on your element.\n\nSo, instead of this...\n\n```javascript\nimport React, {Component} from 'react';\n\nexport default class MyComponent extends Component {\n  handleButtonClick(event) {\n    // do something (event is React's SyntheticEvent)\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cbutton onClick={this.handleButtonClick.bind(this)}\u003eClick Me!\u003c/button\u003e\n      \u003c/div\u003e\n      );\n  }\n}\n```\n...do this:\n\n```javascript\nimport React, {Component} from 'react';\nimport NativeListener from 'react-native-listener';\n\nexport default class MyComponent extends Component {\n  handleButtonClick(event) {\n    // do something (event is native browser event)\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cNativeListener onClick={this.handleButtonClick.bind(this)}\u003e\n          \u003cbutton\u003eClick Me!\u003c/button\u003e\n        \u003c/NativeListener\u003e\n      \u003c/div\u003e\n      );\n  }\n}\n```\n\n**IMPORTANT:** The event passed to your function is the native browser event, _NOT\nReact's [SyntheticEvent](https://facebook.github.io/react/docs/events.html)!!_\n\n### Convenience Properties\n\nIf all you want to do is stop the propagation of an event, there are convenience properties to do that.\n`stopClick`, `stopKeyDown`. For example, say you wanted to allow normal hyperlinks to work, but your\ncomponent is inside some element that JQuery is calling `event.preventDefault()` for clicks...\n\n```javascript\nimport React, {Component} from 'react';\nimport NativeListener from 'react-native-listener';\n\nexport default class MyComponent extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cNativeListener stopClick\u003e\n          \u003ca href=\"https://github.com/erikras/react-native-listener\"\u003eCheck out this awesome code!\u003c/a\u003e\n        \u003c/NativeListener\u003e\n      \u003c/div\u003e\n      );\n  }\n});\n```\n\n**IMPORTANT:** You cannot just put a `\u003cNativeListener stopClick\u003e` surrounding your whole component and\nexpect regular React events to work inside it. That will also prevent the clicks from bubbling up to\nReact's event system listening on the document. If you block an event, you must use `\u003cNativeListener\u003e`\nto listen to that event everywhere inside the `\u003cNativeListener\u003e` element that is blocking the event.\n\n### Note on 1.0.2 Update\n\n**If you use react-native-listener \u003e= 1.0.2 in CommonJS environment, don’t forget to add `.default` to your import:**\n\n```diff\n- var NativeListener = require('react-native-listener')\n+ var NativeListener = require('react-native-listener').default\n```\n\n## Advanced Usage\n\nBy default, the `onClick`, `onKeyDown` event listeners fire on _bubble_. If you understand [the\ndifference between _bubble_ and _capture_](http://www.quirksmode.org/js/events_order.html) and\nyou really need to listen on _capture_, you can simply append `Capture` to your event property.\ne.g. `onClickCapture`, `onKeyDownCapture`.\n\n---\n\nModule written by [Erik Rasmussen](https://www.npmjs.org/~erikras) [@erikras](https://twitter.com/erikras)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferikras%2Freact-native-listener","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferikras%2Freact-native-listener","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferikras%2Freact-native-listener/lists"}