https://github.com/threadi/react-dialog
Repository for threadi/react-dialog npm package
https://github.com/threadi/react-dialog
Last synced: 5 months ago
JSON representation
Repository for threadi/react-dialog npm package
- Host: GitHub
- URL: https://github.com/threadi/react-dialog
- Owner: threadi
- Created: 2023-11-24T12:12:19.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-08-16T16:00:23.000Z (almost 2 years ago)
- Last Synced: 2025-11-27T16:37:04.895Z (7 months ago)
- Language: JavaScript
- Homepage: https://packagist.org/packages/threadi/react-dialog
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# React Dialog
## Requirements
* composer to install this package.
* npm to compile the scripts.
* WordPress-plugin, theme or Code Snippet-plugin to embed them in your project.
## Installation
1. ``composer require threadi/react-dialog``
2. Switch to ``vendor/thread/react-dialog``
3. Run ``npm i`` to install dependencies.
4. Run ``npm run build`` to compile the scripts.
5. Add the codes from `doc/embed.php` to your WordPress-projekt (plugin or theme).
## Configuration
Each dialog is configured with the following options as array:
* className
* string with names the modal should become to set individual styles
* title
* represents the title as single text
* hide_title
* value set to `true` to hide the title
* texts
* array of texts for the dialog
* each entry contains a single string
* buttons
* array of buttons for the dialog
* each entry is an array with following settings:
* action
* string of JavaScript to run on click
* variant
* string to define button-styling
* possible values:
* primary
* secondary
* this setting is optional
* text
* string for the button-text
## Usage
### PHP
```
$dialog = array(
'title' => 'My title',
'texts' => array(
'
My text
'
),
'buttons' => array(
array(
'action' => 'alert("ok");',
'variant' => 'primary',
'text' => 'Click here'
),
)
);
echo 'Some link';
```
### JavaScript
```
let dialog = array(
'title' => 'My title',
'texts' => array(
'
My text
'
),
'buttons' => array(
array(
'action' => 'alert("ok");',
'variant' => 'primary',
'text' => 'Click here'
),
)
);
document.body.dispatchEvent(new CustomEvent("react-dialog", config));
```
## Custom styles
You can customize the output of the dialog with your custom css.
E.g.:
```
body.react-dialog-on-body.wp-core-ui .components-modal__frame.react-dialog {
background-color: red;
}
```
## FAQ
### Is it possible to create multiple dialogs on one screen?
No, this is not possible.
### How to open a new dialog after click on dialog-button?
Call your own function as callback for the button.
Example:
```
'action' => 'open_new_dialog()',
```
```
function open_new_dialog() {
/* define your new dialog */
}
```