{"id":17717721,"url":"https://github.com/mununki/react-simple-click-outside","last_synced_at":"2025-03-31T12:25:33.953Z","repository":{"id":57344630,"uuid":"169703848","full_name":"mununki/react-simple-click-outside","owner":"mununki","description":"Simple click outside handler for React","archived":false,"fork":false,"pushed_at":"2019-03-19T04:48:23.000Z","size":160,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-24T03:22:05.603Z","etag":null,"topics":[],"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/mununki.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":"2019-02-08T08:19:42.000Z","updated_at":"2024-04-24T03:22:05.604Z","dependencies_parsed_at":"2022-09-11T09:01:19.117Z","dependency_job_id":null,"html_url":"https://github.com/mununki/react-simple-click-outside","commit_stats":null,"previous_names":["mattdamon108/react-simple-click-outside"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mununki%2Freact-simple-click-outside","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mununki%2Freact-simple-click-outside/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mununki%2Freact-simple-click-outside/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mununki%2Freact-simple-click-outside/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mununki","download_url":"https://codeload.github.com/mununki/react-simple-click-outside/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246466981,"owners_count":20782231,"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":[],"created_at":"2024-10-25T14:29:46.715Z","updated_at":"2025-03-31T12:25:33.906Z","avatar_url":"https://github.com/mununki.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Simple-Click-Outside\n\n### [Demo](https://mattdamon108.github.io/react-simple-click-outside/)\n\n[![npm version](https://badge.fury.io/js/react-simple-click-outside.svg)](https://badge.fury.io/js/react-simple-click-outside)\n\nThis is the tiny and simple click outside handler which enables your target component(or element) to listen click events outside of itself.\n\nThis module can help you to make such as drop-down menu, modal, popover, tooltip easily.\n\n### Features\n\n1. Listen click events of outside area.\n2. Typescript compatibility.\n\n### Install\n\n```shell\n$ npm i react-simple-click-outside\n\n# or\n\n$ yarn add react-simple-click-outside\n```\n\n### Example\n\n```javascript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ClickOutside from \"react-simple-click-outside\";\n\nclass Example extends React.Component {\n  state = {\n    isOpen: false\n  };\n\n  _toggle = () =\u003e {\n    this.setState(prevState =\u003e {\n      return { isOpen: !prevState.isOpen };\n    });\n  };\n\n  _close = target =\u003e {\n    this.setState({\n      [target]: false\n    });\n  };\n\n  render() {\n    const { isOpen } = this.state;\n    return (\n      \u003c\u003e\n        \u003cClickOutside close={this._close} target=\"isOpen\"\u003e\n          \u003cdiv\u003e\n            \u003cbutton onClick={this._toggle}\u003eToggle\u003c/button\u003e\n            {isOpen ? \u003cdiv\u003eHi~\u003c/div\u003e : null}\n          \u003c/div\u003e\n        \u003c/ClickOutside\u003e\n      \u003c/\u003e\n    );\n  }\n}\n\nReactDOM.render(\u003cExample /\u003e, document.getElementById(\"root\"));\n```\n\n### Props\n\n| Props  | Required | Type     | Default   | Descriptioin                                                                                                    |\n| ------ | -------- | -------- | --------- | --------------------------------------------------------------------------------------------------------------- |\n| close  | Yes      | function | undefined | The function to close the target component or element                                                           |\n| target | No       | string   | undefined | The target(eg. `this.state.isOpen`) which the `close` function will work on. It will be args of close function. |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmununki%2Freact-simple-click-outside","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmununki%2Freact-simple-click-outside","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmununki%2Freact-simple-click-outside/lists"}