{"id":22756766,"url":"https://github.com/yamamotok/dialogwall","last_synced_at":"2026-05-08T13:16:24.846Z","repository":{"id":42584167,"uuid":"267344379","full_name":"yamamotok/dialogwall","owner":"yamamotok","description":"A React component which provides mechanism for showing custom modal dialogs and spinners. Tiny customizable preset ones are also available. モーダルダイアログとスピナーを表示する仕組みを提供します。カスタマイズ可能なプリセットを同梱します。","archived":false,"fork":false,"pushed_at":"2023-01-07T12:19:33.000Z","size":2255,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-05T17:42:26.973Z","etag":null,"topics":["custom-dialog","dialog","modal-dialogs","react","reactjs","spinner","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/dialogwall","language":"TypeScript","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/yamamotok.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}},"created_at":"2020-05-27T14:39:37.000Z","updated_at":"2022-03-22T23:37:23.000Z","dependencies_parsed_at":"2023-02-07T03:30:58.579Z","dependency_job_id":null,"html_url":"https://github.com/yamamotok/dialogwall","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamamotok%2Fdialogwall","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamamotok%2Fdialogwall/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamamotok%2Fdialogwall/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamamotok%2Fdialogwall/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yamamotok","download_url":"https://codeload.github.com/yamamotok/dialogwall/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246290648,"owners_count":20753730,"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":["custom-dialog","dialog","modal-dialogs","react","reactjs","spinner","typescript"],"created_at":"2024-12-11T07:15:04.100Z","updated_at":"2026-05-08T13:16:19.821Z","avatar_url":"https://github.com/yamamotok.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"DialogWall\n=============\n\n- A **React** component.\n- It provides mechanism to show custom modal dialog and spinner.\n- Tiny preset customizable dialog and spinner are available.\n- ES Module since v0.3.0.\n- [Bootstrap](https://getbootstrap.com/) is a peer dependency. However, in case you only use your customized ones, it is not necessary.\n\n## Installation\n\n```shell\nnpm install --save dialogwall\n```\nTypeScript ready. Type definition is included.\n\n\n## React version\n\nSince this library is using hook, React version must be \u003e= 16.8\n\n\n## Setup\n\nPlace `\u003cDialgWall\u003e` HOC.\n\n```typescript jsx\nReactDOM.render(\n  \u003cReact\u003e\n    \u003cDialogWall\u003e\n      \u003cApp /\u003e\n    \u003c/DialogWall\u003e\n  \u003c/React\u003e,\n  document.getElementById('root')\n);\n```\n\n## Use Built-in Dialog\n\nShow a simple dialog with white dialog box. For getting good looks,\n[Bootstrap](https://getbootstrap.com/) is necessary. (Peer dependency)\n\n```typescript jsx\nconst Tester: React.FC = (props) =\u003e {\n  const dialog = useDialog();\n\n  const onClick: MouseEventHandler = (e) =\u003e {\n    dialog\n      .builder()\n      .setMessage('Hello World')\n      .setPositiveButton('Accept') /* Optional */\n      .setNegativeButton('Decline') /* Optional */\n      .setResultCallback((result) =\u003e console.log(result)) /* Optional */\n      .setSpec({ useEscForCancel: true }) /* Optional */\n      .show();\n  };\n \n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={onClick}\u003eShow dialog\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Use Built-in Spinner\n\nShow a simple loading spinner. This is using a CSS spinner from [Loading.io](https://loading.io/css/).\n\n```typescript jsx\nconst Tester: React.FC = (props) =\u003e {\n  const dialog = useDialog();\n\n  const show: MouseEventHandler = (e) =\u003e {\n    dialog.showSpinner();\n  };\n  \n  // Call `dialog.hideSpinner()` to hide it.\n \n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={show}\u003eShow spinner\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n\n## Use Custom Dialog\n\nShow a custom dialog you created.\n\n```typescript jsx\nconst CustomDialog: DialogComponent = (props) =\u003e {\n  const onClick: MouseEventHandler = (e) =\u003e props.close('Liked');\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={onClick}\u003eLike\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nconst Page: React.FC = () =\u003e {\n  const dialog = useDialog();\n  const onClick: MouseEventHandler = (e) =\u003e {\n    dialog.show({\n      component: CustomDialog,\n      onClose: (reason) =\u003e console.log(reason),\n    });\n  };\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={onClick}\u003eShow dialog\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Licence\n\nMIT  \n\u0026copy; Keisuke Yamamoto 2021\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamamotok%2Fdialogwall","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyamamotok%2Fdialogwall","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamamotok%2Fdialogwall/lists"}