{"id":13450548,"url":"https://github.com/wowlusitong/react-use-modal","last_synced_at":"2025-08-04T03:32:55.452Z","repository":{"id":39559105,"uuid":"168928740","full_name":"wowlusitong/react-use-modal","owner":"wowlusitong","description":"A react component for manage modal","archived":false,"fork":false,"pushed_at":"2023-01-26T05:19:07.000Z","size":1395,"stargazers_count":21,"open_issues_count":36,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-20T06:39:20.949Z","etag":null,"topics":["antd","modal","react","react-bootstrap","react-hooks"],"latest_commit_sha":null,"homepage":"https://react-use-modal.netlify.com/","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/wowlusitong.png","metadata":{"files":{"readme":"README-en.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-03T09:24:11.000Z","updated_at":"2023-03-10T09:55:38.000Z","dependencies_parsed_at":"2023-02-01T17:45:47.493Z","dependency_job_id":null,"html_url":"https://github.com/wowlusitong/react-use-modal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wowlusitong/react-use-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wowlusitong%2Freact-use-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wowlusitong%2Freact-use-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wowlusitong%2Freact-use-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wowlusitong%2Freact-use-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wowlusitong","download_url":"https://codeload.github.com/wowlusitong/react-use-modal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wowlusitong%2Freact-use-modal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268644482,"owners_count":24283334,"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","status":"online","status_checked_at":"2025-08-04T02:00:09.867Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["antd","modal","react","react-bootstrap","react-hooks"],"created_at":"2024-07-31T07:00:35.935Z","updated_at":"2025-08-04T03:32:55.399Z","avatar_url":"https://github.com/wowlusitong.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# react-use-modal\n\nMost of the mainstream modal needs to use the state control in the component to display whether it is inconvenient to call in multiple places, so it is easier to provide based on [context](https://reactjs.org/docs/context.html#api) The method of calling.\n\n`use-modal` supports the mainstream modal. In theory, as long as the modal is controlled by something like `show props`, it can be supported, for example:\n- [antd](https://github.com/ant-design/ant-design)\n- [react-bootstrap](https://react-bootstrap.github.io/components/modal/)\n- [react-overlays](https://github.com/react-bootstrap/react-overlays)\n- [react-modals](https://github.com/reactjs/react-modal)\n- [material-ui](https://material-ui.com/utils/modal/)\n\n## Installation\n\nUse yarn\n```\n$ yarn add react-use-modal\n```\nOr use npm\n```\n$ npm install react-use-modal --save\n```\n\n## Use\n\nPut `ModalProvider` in the outer layer of the component\n```js\nImport ReactDOM from 'react-dom';\nImport { ModalProvider } from 'react-use-modal';\n\nReactDOM.render(\n  \u003cModalProvider\u003e\n    ...\n  \u003c/ModalProvider\u003e,\n  document.querySelector('#root')\n)\n```\nCall mode, with react-bootstrap example\n\nUse context\n```js\nImport React from 'react';\n\nImport { Modal } from 'react-bootstrap';\nImport { ModalContext } from 'react-use-modal';\n\nExport default class App extends React.Component {\n\n  handleClick = () =\u003e {\n    Const {showModal, closeModal} = this.context;\n    showModal(({ show }) =\u003e (\n      \u003cModal show={show} onHide={closeModal}\u003e\n        \u003cModal.Body\u003ebody\u003c/Modal.Body\u003e\n      \u003c/Modal\u003e\n    ))\n  }\n\n  Render() {\n    Return (\n      \u003cbutton onClick={this.handleClick}\u003eclick\u003c/button\u003e\n    )\n  }\n}\nProduct.contextType = ModalContext\n```\nUse hooks\n```js\nImport React from 'react';\nImport { Modal } from 'react-bootstrap';\nImport { useModal } from 'react-use-modal';\n\nConst App = () =\u003e {\n  Const { showModal, closeModal } = useModal();\n\n  Function handleClick() {\n    showModal(({ show }) =\u003e (\n      \u003cModal show={show} onHide={closeModal}\u003e\n        \u003cModal.Header closeButton\u003e\n          \u003cModal.Title\u003eModal title\u003c/Modal.Title\u003e\n        \u003c/Modal.Header\u003e\n        \u003cModal.Body\u003eModal body text goes here.\u003c/Modal.Body\u003e\n      \u003c/Modal\u003e\n    ))\n  }\n\n  Return (\n    \u003cbutton onClick={handleClick}\u003emodal\u003c/button\u003e\n  )\n}\n```\n\n## API\n\n#### showModal\nShow modal, set `show` to true\n\n##### Parameters\nComponent(?Function):\nThe first call must pass a parameter, and the call again can be ignored.\n```js\nshowModal(props =\u003e (\n  \u003cModal show={show} onHide={closeModal}\u003e\n    \u003cModal.Body\u003ebody\u003c/Modal.Body\u003e\n  \u003c/Modal\u003e\n))\n```\n\nComponent props\n\nName|Type|Default|Description\n-|-|-|-\nShow|boolean|false| Whether to display modal\n\n#### closeModal\nTurn off modal and set `show` to false\n\n---\nby google translate\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwowlusitong%2Freact-use-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwowlusitong%2Freact-use-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwowlusitong%2Freact-use-modal/lists"}