{"id":16749741,"url":"https://github.com/myckhel/use-event-listeners","last_synced_at":"2025-04-10T14:11:33.343Z","repository":{"id":57388044,"uuid":"412783464","full_name":"myckhel/use-event-listeners","owner":"myckhel","description":"Nodejs Events with react hook","archived":false,"fork":false,"pushed_at":"2024-03-26T12:14:49.000Z","size":542,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T19:49:19.563Z","etag":null,"topics":["events","react-native","reactjs"],"latest_commit_sha":null,"homepage":"https://nodejs.org/api/events.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/myckhel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-02T12:00:12.000Z","updated_at":"2022-08-23T00:23:51.000Z","dependencies_parsed_at":"2024-09-26T06:40:24.329Z","dependency_job_id":null,"html_url":"https://github.com/myckhel/use-event-listeners","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myckhel%2Fuse-event-listeners","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myckhel%2Fuse-event-listeners/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myckhel%2Fuse-event-listeners/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myckhel%2Fuse-event-listeners/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/myckhel","download_url":"https://codeload.github.com/myckhel/use-event-listeners/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248232444,"owners_count":21069487,"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":["events","react-native","reactjs"],"created_at":"2024-10-13T02:25:52.612Z","updated_at":"2025-04-10T14:11:33.317Z","avatar_url":"https://github.com/myckhel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-event-listeners\n\n\u003e React node event hook\n`use-event-listeners` is a React hook that enables you to easily manage event listeners within your components. With this hook, you can efficiently handle various events and their corresponding actions, making your code more organized and maintainable.\n\n[![NPM](https://img.shields.io/npm/v/use-event-listeners.svg)](https://www.npmjs.com/package/use-event-listeners) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Installation\n\n```bash\nnpm install --save use-event-listeners\n```\n\nSee [Nodejs Event](https://nodejs.org/api/events.html)\n\n### Usage\n\nHere's a simple example demonstrating how to use `use-event-listeners`:\n\n```jsx\nimport React, { useState } from 'react'\nimport useEventListener from 'use-event-listeners'\n\nconst ExampleComponent = () =\u003e {\n  const [text, setText] = useState('')\n\n  const emitter = useEventListener(\n    {\n      listeners: {\n        setText: (text) =\u003e {\n          setText(text)\n        }\n      },\n      removeListeners: {\n        setText: () =\u003e console.log('setText removed')\n      }\n    },\n    []\n  )\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003e\n        Using useEventListener{' '}\n        \u003cspan aria-label='smile' role='img'\u003e\n          😄\n        \u003c/span\u003e\n        \u003cdiv\u003eText input: {text}\u003c/div\u003e\n        \u003cinput\n          value={text}\n          onChange={({ target: { value } }) =\u003e emitter.emit('setText', value)}\n        /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default ExampleComponent\n```\n\nIn this example:\n- We import `useEventListener` from `use-event-listeners`.\n- Inside the component, we define a state variable `text` and its setter function `setText` using the `useState` hook.\n- We then use the `useEventListener` hook to create an `emitter` object, which manages event listeners.\n- The `emitter` object listens for events specified in the `listeners` object. In this case, it listens for the `setText` event and updates the `text` state accordingly.\n- We can also specify cleanup actions for removing listeners using the `removeListeners` object. In this example, we log a message when the `setText` listener is removed.\n- Finally, we use the `emitter.emit` method to trigger the `setText` event when the input value changes, updating the `text` state.\n\n### API\n\n#### useEventListener(config, dependencies)\n\n- `config`: An object containing configuration options for event listeners.\n  - `listeners`: An object where keys represent event names and values are callback functions to handle those events.\n  - `removeListeners`: An object where keys represent event names and values are callback functions to handle listener removal.\n- `dependencies`: An array of dependencies. The hook will recompute listeners whenever any of these dependencies change.\n\n### useEmitter\n```jsx\nimport React, { useState } from 'react'\nimport { useEmitter} from 'use-event-listeners'\n\nconst UseEmitter = () =\u003e {\n  const emitter = useEmitter()\n\n  return (\n    \u003cbutton onClick={() =\u003e emitter.emit('setText', '')}\u003eReset input\u003c/button\u003e\n  )\n}\n```\n\n### Conclusion\n\n`use-event-listeners` simplifies event handling in React components by providing a straightforward API for managing event listeners. It's a useful tool for building interactive and responsive user interfaces in your React applications.\n\n## License\n\nMIT © [myckhel](https://github.com/myckhel)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyckhel%2Fuse-event-listeners","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmyckhel%2Fuse-event-listeners","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyckhel%2Fuse-event-listeners/lists"}