{"id":31030118,"url":"https://github.com/cuongdevjs/wil-react-modal","last_synced_at":"2026-02-12T08:31:12.343Z","repository":{"id":39672828,"uuid":"222221422","full_name":"cuongdevjs/wil-react-modal","owner":"cuongdevjs","description":"Modal Component For React","archived":false,"fork":false,"pushed_at":"2025-11-17T10:57:27.000Z","size":4078,"stargazers_count":1,"open_issues_count":101,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-11-17T12:23:13.639Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":false,"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/cuongdevjs.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-11-17T08:56:04.000Z","updated_at":"2024-10-25T03:56:52.000Z","dependencies_parsed_at":"2025-05-12T07:25:36.998Z","dependency_job_id":"e0cab546-04c9-41c3-8bc3-37e387acf179","html_url":"https://github.com/cuongdevjs/wil-react-modal","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/cuongdevjs/wil-react-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuongdevjs%2Fwil-react-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuongdevjs%2Fwil-react-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuongdevjs%2Fwil-react-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuongdevjs%2Fwil-react-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cuongdevjs","download_url":"https://codeload.github.com/cuongdevjs/wil-react-modal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuongdevjs%2Fwil-react-modal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29361818,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-12T01:03:07.613Z","status":"online","status_checked_at":"2026-02-12T02:00:06.911Z","response_time":55,"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":[],"created_at":"2025-09-13T22:58:06.137Z","updated_at":"2026-02-12T08:31:12.329Z","avatar_url":"https://github.com/cuongdevjs.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Wil React Modal\nModal Component For React\n\n### Installation\n\n**npm**\n\n```bash\nnpm install wil-react-modal --save\n```\n\n**yarn**\n\n```bash\nyarn add wil-react-modal\n```\n\n**Example**\n\n#### [1. Basic](https://u7cos.codesandbox.io/)\n#### [2. Open Modal from other file and send payload](https://u7cos.codesandbox.io/open-from-foojs)\n#### [3. Animation](https://u7cos.codesandbox.io/animation)\n#### [4. Placement](https://u7cos.codesandbox.io/placement)\n#### [5. Fullscreen](https://u7cos.codesandbox.io/fullscreen)\n#### [6. Nested](https://u7cos.codesandbox.io/nested)\n#### [7. Auto visible](https://u7cos.codesandbox.io/autovisible)\n#### [8. Open modal and auto close modal after 5s](https://u7cos.codesandbox.io/closetimeout)\n#### [9. Router Modal](https://u7cos.codesandbox.io/routermodal)\n\n```js\nimport React from \"react\";\nimport Modal from \"wil-react-modal\";\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cbutton\n          onClick={() =\u003e {\n            Modal.open(\"basic\", {\n              payload: { name: \"Wil React Modal\", author: \"Wiloke\" }\n            })\n          }}\n        \u003eModal Basic\u003c/button\u003e\n\n        \u003cModal\n          displayName=\"basic\"\n          animationType=\"zoom\"\n          onOpen={payload =\u003e {\n            // payload: { name: \"Wil React Modal\", author: \"Wiloke\" }\n            console.log(payload);\n          }}\n        \u003e\n          \u003cdiv style={{ backgroundColor: \"#fff\", padding: 30 }}\u003e\n            \u003ch2\u003eModal Basic\u003c/h2\u003e\n            \u003cbutton onClick={() =\u003e Modal.close(\"basic\")}\u003eClose\u003c/button\u003e\n          \u003c/div\u003e\n        \u003c/Modal\u003e\n      \u003c/div\u003e\n    )\n  }\n```\n\n**API**\n\n| Prop                  | Type                                | Default | Description |\n| :---------            | :-------:                           | :-----: | :----------- |\n| displayName             | `string`                     | -       | Modal name |\n| placement             | `\"center\", \"top\", \"right\", \"bottom\", \"left\"`                     | `center`       | The position of the modal relative to the screen |\n| animationDuration    | `number`      | `300`       | Modal animation duration ( milliseconds ) |\n| animationType           | `\"none\", \"fade\", \"fadeUp\", \"fadeDown\", \"fadeLeft\", \"fadeRight\", \"slideUp\", \"slideDown\", \"slideLeft\", \"slideRight\", \"zoom\"`                            | `none`    | animation for modal |\n| underlayEnabled             | `boolean`                     | `true`       | On / off modal underlay |\n| underlayColor             | `string`                     | `rgba(0, 0, 0, 0.5)`       | Set color for modal underlay |\n| fullScreen             | `boolean`                     | `false`       | Content width 100% height 100% |\n| scrollTarget             | `string`                     | `window`       | Toggle the scroll bar of the element. Example scrollTarget value: window, #root, ...  |\n| scrollTargetEnabled             | `boolean`                     | `false`       | Allow toggle scroll bar  |\n| openTimeout             | `boolean`                     | `false`       | Open modal timeout (second)  |\n| autoCloseTimeout             | `boolean`                     | `false`       | Close modal timeout (second)  |\n| children             | `React.Node or (({ payload: any, countDown: number }) =\u003e React.Node)`  | -       | ReactNode or Function return ReactNode (payload received from method open and countDown from prop autoCloseTimeout)  |\n| onOpen             | `(payload: any) =\u003e void`                     | -       | Callback executed when modal open. Payload received from method open  |\n| onOpenEnd             | `(payload: any) =\u003e void`                     | -       | Callback executed when modal open stop. Payload received from method open  |\n| onCloseEnd             | `() =\u003e void`                     | -       | Callback executed when modal close  |\n| isVisible             | `boolean`                     | -       | Set on / off modal. This attribute is needed when you want to open modal at the beginning without taking action  |\n| modalContainerClassName             | `string`   | -       | ClassName for Modal  |\n| modalContainerStyle             | `Object`   | -       | Style for Modal  |\n\n**Methods**\n\n| Method          | Params   |  Description |\n| :---------      | :-------:     | :----------- |\n| open            | `displayName, { historyPushTitle, historyPushUrl, payload }`     | Open modal with prop `displayName`. You can using `historyPushTitle` and `historyPushUrl` for Modal Router and send data with `payload` ( `historyPushUrl` could be `http://localhost:3000/foo.html` or `/foo.html` or `foo.html`. Example: [Router Modal](https://u7cos.codesandbox.io/routermodal) ) |\n| close           | `displayName`      | Close modal with prop displayName Modal.close(\"displayName\") |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuongdevjs%2Fwil-react-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcuongdevjs%2Fwil-react-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuongdevjs%2Fwil-react-modal/lists"}