{"id":36981599,"url":"https://github.com/threadi/react-dialog","last_synced_at":"2026-01-13T22:51:27.681Z","repository":{"id":208996990,"uuid":"722986534","full_name":"threadi/react-dialog","owner":"threadi","description":"Repository for threadi/react-dialog npm package","archived":false,"fork":false,"pushed_at":"2024-08-16T16:00:23.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-27T16:37:04.895Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://packagist.org/packages/threadi/react-dialog","language":"JavaScript","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/threadi.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}},"created_at":"2023-11-24T12:12:19.000Z","updated_at":"2024-08-16T16:00:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"01dbc43e-4657-4499-8e0e-5fe0f746176b","html_url":"https://github.com/threadi/react-dialog","commit_stats":null,"previous_names":["threadi/react-dialog"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/threadi/react-dialog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threadi%2Freact-dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threadi%2Freact-dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threadi%2Freact-dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threadi%2Freact-dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/threadi","download_url":"https://codeload.github.com/threadi/react-dialog/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threadi%2Freact-dialog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28402160,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-13T14:36:09.778Z","status":"ssl_error","status_checked_at":"2026-01-13T14:35:19.697Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":"2026-01-13T22:51:27.067Z","updated_at":"2026-01-13T22:51:27.676Z","avatar_url":"https://github.com/threadi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Dialog\n\n## Requirements\n\n* composer to install this package.\n* npm to compile the scripts.\n* WordPress-plugin, theme or Code Snippet-plugin to embed them in your project.\n\n## Installation\n\n1. ``composer require threadi/react-dialog``\n2. Switch to ``vendor/thread/react-dialog``\n3. Run ``npm i`` to install dependencies.\n4. Run ``npm run build`` to compile the scripts.\n5. Add the codes from `doc/embed.php` to your WordPress-projekt (plugin or theme).\n\n## Configuration\n\nEach dialog is configured with the following options as array:\n\n* className\n    * string with names the modal should become to set individual styles\n* title\n    * represents the title as single text\n* hide_title\n    * value set to `true` to hide the title\n* texts\n    * array of texts for the dialog\n    * each entry contains a single string\n* buttons\n    * array of buttons for the dialog\n    * each entry is an array with following settings:\n        * action\n            * string of JavaScript to run on click\n        * variant\n            * string to define button-styling\n            * possible values:\n                * primary\n                * secondary\n            * this setting is optional\n        * text\n            * string for the button-text\n\n## Usage\n\n### PHP\n\n```\n$dialog = array(\n\t'title' =\u003e 'My title',\n\t'texts' =\u003e array(\n\t\t'\u003cp\u003eMy text\u003c/p\u003e'\n\t),\n\t'buttons' =\u003e array(\n\t\tarray(\n\t\t\t'action' =\u003e 'alert(\"ok\");',\n\t\t\t'variant' =\u003e 'primary',\n\t\t\t'text' =\u003e 'Click here'\n\t\t),\n\t)\n);\necho '\u003ca href=\"#\" class=\"react-dialog\" data-dialog=\"'.esc_attr(wp_json_encode($dialog)).'\"\u003eSome link\u003c/a\u003e';\n```\n\n### JavaScript\n\n```\nlet dialog = array(\n\t'title' =\u003e 'My title',\n\t'texts' =\u003e array(\n\t\t'\u003cp\u003eMy text\u003c/p\u003e'\n\t),\n\t'buttons' =\u003e array(\n\t\tarray(\n\t\t\t'action' =\u003e 'alert(\"ok\");',\n\t\t\t'variant' =\u003e 'primary',\n\t\t\t'text' =\u003e 'Click here'\n\t\t),\n\t)\n);\ndocument.body.dispatchEvent(new CustomEvent(\"react-dialog\", config));\n```\n## Custom styles\n\nYou can customize the output of the dialog with your custom css.\n\nE.g.:\n\n```\nbody.react-dialog-on-body.wp-core-ui .components-modal__frame.react-dialog {\n background-color: red;\n}\n```\n\n## FAQ\n\n### Is it possible to create multiple dialogs on one screen?\n\nNo, this is not possible.\n\n### How to open a new dialog after click on dialog-button?\n\nCall your own function as callback for the button.\n\nExample:\n```\n'action' =\u003e 'open_new_dialog()',\n```\n\n```\nfunction open_new_dialog() {\n /* define your new dialog */\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthreadi%2Freact-dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthreadi%2Freact-dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthreadi%2Freact-dialog/lists"}