{"id":15416267,"url":"https://github.com/ooade/react-click-away-listener","last_synced_at":"2025-05-15T11:07:40.709Z","repository":{"id":34597434,"uuid":"180581954","full_name":"ooade/react-click-away-listener","owner":"ooade","description":":paw_prints: Tiny React Click Away Listener built with React Hooks","archived":false,"fork":false,"pushed_at":"2025-04-12T23:28:41.000Z","size":716,"stargazers_count":178,"open_issues_count":1,"forks_count":14,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-14T19:58:46.800Z","etag":null,"topics":["click-away","click-outside","event-handler","react","react-hooks"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/ooade.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-04-10T12:56:01.000Z","updated_at":"2025-04-12T23:28:09.000Z","dependencies_parsed_at":"2023-02-18T12:16:14.543Z","dependency_job_id":"de8e0f18-3f5c-4d8e-bfd9-a46bf53a8a9d","html_url":"https://github.com/ooade/react-click-away-listener","commit_stats":{"total_commits":122,"total_committers":7,"mean_commits":"17.428571428571427","dds":0.2622950819672131,"last_synced_commit":"1ea38c4e518101fb004a1ac0dbbbdb5e39acb43d"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ooade%2Freact-click-away-listener","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ooade%2Freact-click-away-listener/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ooade%2Freact-click-away-listener/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ooade%2Freact-click-away-listener/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ooade","download_url":"https://codeload.github.com/ooade/react-click-away-listener/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328384,"owners_count":22052632,"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":["click-away","click-outside","event-handler","react","react-hooks"],"created_at":"2024-10-01T17:11:22.506Z","updated_at":"2025-05-15T11:07:40.689Z","avatar_url":"https://github.com/ooade.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/ooade/react-click-away-listener/main/logo.png\" height=\"150\" /\u003e\n  \u003ch3 align=\"center\"\u003e~700B React Click Away Listener\u003c/h3\u003e\n  \u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.org/package/react-click-away-listener\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-click-away-listener.svg?style=flat-square\" alt=\"npm\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://coveralls.io/github/ooade/react-click-away-listener?branch=main\"\u003e\u003cimg src=\"https://coveralls.io/repos/github/ooade/react-click-away-listener/badge.svg?branch=main\" alt=\"Coverage Status\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/ooade/react-click-away-listener/blob/main/.github/workflows/test-main.yml\"\u003e\u003cimg src=\"https://github.com/ooade/react-click-away-listener/actions/workflows/test-main.yml/badge.svg\" alt=\"Test main\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.org/package/react-click-away-listener\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/react-click-away-listener.svg?style=flat-square\" alt=\"downloads/month\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/package/react-click-away-listener\n\"\u003e\u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/react-click-away-listener?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"http://makeapullrequest.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/PR(s)-welcome-brightgreen.svg?style=flat-square\" alt=\"pullrequest\"\u003e\u003c/a\u003e\n  \u003ca href=\"http://www.firsttimersonly.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/first--timers--only-friendly-blue.svg?style=flat-square\" alt=\"firsttimersonly\"\u003e\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n## Installation\n\n```sh\nnpm install react-click-away-listener\n```\n\nor\n\n```sh\nyarn add react-click-away-listener\n```\n\n- It's quite **small** in size! Just [![Bundlephobia](https://img.shields.io/bundlephobia/min/react-click-away-listener.svg?style=flat-square\u0026label 'Bundle size (minified)')](https://bundlephobia.com/result?p=react-click-away-listener) minified, or [![Bundlephobia](https://img.shields.io/bundlephobia/minzip/react-click-away-listener.svg?style=flat-square\u0026label 'Bundle size (minified+gzipped)')](https://bundlephobia.com/result?p=react-click-away-listener) minified \u0026 gzipp’d.\n- It's built with **TypeScript**.\n- It works with [React Portals](https://reactjs.org/docs/portals.html) ([v2.0.0](https://github.com/ooade/react-click-away-listener/releases/tag/v2.0.0) onwards).\n- It supports **mouse**, **touch** and **focus** events.\n\n## Usage\n\n```jsx\nimport ClickAwayListener from 'react-click-away-listener';\n\nconst App = () =\u003e {\n\tconst handleClickAway = () =\u003e {\n\t\tconsole.log('Maybe close the popup');\n\t};\n\n\treturn (\n\t\t\u003cdiv id=\"app\"\u003e\n\t\t\t\u003cClickAwayListener onClickAway={handleClickAway}\u003e\n\t\t\t\t\u003cdiv\u003e\n\t\t\t\t\t{' '}\n\t\t\t\t\tTriggers whenever a click event is registered outside this div element{' '}\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/ClickAwayListener\u003e\n\t\t\u003c/div\u003e\n\t);\n};\n```\n\n### Caveats\n\n[v2.0.0](https://github.com/ooade/react-click-away-listener/releases/tag/v2.0.0) has breaking changes which uses the [`React.Children.only`](https://reactjs.org/docs/react-api.html#reactchildrenonly) API.\n\nThus, the following caveats apply for the `children` of the `\u003cClickAwayListener\u003e` component:\n\n1. You may pass **only one child** to the `\u003cClickAwayListener\u003e` component.\n2. You may not pass plain text nodes to the `\u003cClickAwayListener\u003e` component.\n\nViolating the above caveats will result in the following error:\n\n```js\nError: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.\n\nCheck the render method of `ClickAwayListener`.\n```\n\nIf you have multiple child components to pass, you can simply wrap them around a [React Fragment](https://reactjs.org/docs/fragments.html) like so:\n\n```jsx\n// Assume the `handleClickAway` function is defined.\n\u003cClickAwayListener onClickAway={handleClickAway}\u003e\n\t\u003c\u003e\n\t\t\u003cp\u003eFirst paragraph\u003c/p\u003e\n\t\t\u003cbutton\u003eExample Button\u003c/button\u003e\n\t\t\u003cp\u003eSecond paragraph\u003c/p\u003e\n\t\u003c/\u003e\n\u003c/ClickAwayListener\u003e\n```\n\nOr if you only have text nodes, you can also wrap them in a [React Fragment](https://reactjs.org/docs/fragments.html) like so:\n\n```jsx\n// Assume the `handleClickAway` function is defined.\n\u003cClickAwayListener onClickAway={handleClickAway}\u003e\n\t\u003c\u003eFirst text node Second text node\u003c/\u003e\n\u003c/ClickAwayListener\u003e\n```\n\n## Props\n\n| Name        | Type                                        | Default    | Description                                               |\n| ----------- | ------------------------------------------- | ---------- | --------------------------------------------------------- |\n| onClickAway | (event) =\u003e void                             |            | Fires when a user clicks outside the click away component |\n| mouseEvent  | 'click' \\|\u003cbr/\u003e'mousedown' \\|\u003cbr/\u003e'mouseup' | 'click'    | The mouse event type that gets fired on ClickAway         |\n| touchEvent  | 'touchstart' \\|\u003cbr/\u003e'touchend'              | 'touchend' | The touch event type that gets fired on ClickAway         |\n| focusEvent  | 'focusin' \\|\u003cbr/\u003e'focusout'                 | 'focusin'  | The focus event type that gets fired on ClickAway         |\n\n## Examples\n\n- [A simple menu built with React Hooks](https://codesandbox.io/s/52384lyo8p)\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fooade%2Freact-click-away-listener","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fooade%2Freact-click-away-listener","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fooade%2Freact-click-away-listener/lists"}