Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/weblineindia/reactjs-messagedialog
ReactJS based MessageDialog component used for showing custom dialog with message. You can even change number of buttons on that. You can also hide header and cross icon.
https://github.com/weblineindia/reactjs-messagedialog
alert-box alertbox custom-dialog message-dialog messagedialog messagedialog-component react-alert-box react-components react-demo react-libraries react-message reactjs reactjs-alert-box reactjs-components reactjs-demo reactjs-library reactjs-messagedialog reusable-components
Last synced: 5 days ago
JSON representation
ReactJS based MessageDialog component used for showing custom dialog with message. You can even change number of buttons on that. You can also hide header and cross icon.
- Host: GitHub
- URL: https://github.com/weblineindia/reactjs-messagedialog
- Owner: weblineindia
- License: mit
- Created: 2020-07-24T12:05:08.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-27T08:22:38.000Z (11 months ago)
- Last Synced: 2024-03-28T07:43:54.291Z (8 months ago)
- Topics: alert-box, alertbox, custom-dialog, message-dialog, messagedialog, messagedialog-component, react-alert-box, react-components, react-demo, react-libraries, react-message, reactjs, reactjs-alert-box, reactjs-components, reactjs-demo, reactjs-library, reactjs-messagedialog, reusable-components
- Language: JavaScript
- Homepage: https://www.weblineindia.com/communities.html
- Size: 202 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ReactJS - MessageDialog component
ReactJS based MessageDialog component used for showing custom dialog with message. You can even change number of buttons on that. You can also hide header and cross icon.
## Table of contents
- [Browser Support](#browser-support)
- [Demo](#demo)
- [Getting started](#getting-started)
- [Usage](#usage)
- [Available Props](#available-props)
- [Methods](#methods)
- [Want to Contribute?](#want-to-contribute)
- [Collection of Other Components](#collection-of-components)
- [Changelog](#changelog)
- [License](#license)
## Browser Support
|  |  |  |  |  |
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| 83.0 ✔ | 77.0 ✔ | 13.1.1 ✔ | 83.0 ✔ | 11.9 ✔ |
## Demo
[](https://github.com/weblineindia/ReactJS-MessageDialog/modaldialog.gif)
## Getting started
```bash
npm install react-weblineindia-message-dialog-box
# or use npm
yarn add react-weblineindia-message-dialog-box
```
## Usage
```js
import React, { Component } from "react";
import MessageDialogBox from 'react-weblineindia-message-dialog-box'
class Test extends Component {
constructor(props) {
super(props);
this.state = {
visible: true,
content: "Hello",
showHeader: "Modal Title",
buttons: [
{
id: 1,
title: "Yes"
},
{
id: 2,
title: "No"
}
]
};
}
onClose(value) {
this.setState({
visible: value
});
}
onButtonClick(event, value) {
this.setState({
visible: !value
});
}
render() {
return (
);
}
}
export default Test;
```
## Available Props
| Prop | Data Type | Default | Description |
| --------------- | --------- | ------- | -------------------------------------------------------------------------------- |
| `id` | string | | id of the component |
| `name` | string | | name of the component |
| `visible` | Boolean | false | Show/Hide Modal. |
| `content` | String | | Content of the modal |
| `buttons` | Array | [] | Buttons objects to contain the button label, button click event, no buttons etc. |
| `showHeader` | boolean | false | To hide or show the header of the component. |
| `headerContent` | String | | header Content of the modal. |
## Methods
| Name | Description | Value |
| --------------- | ------------------------------------- | ----------------- |
| `onButtonClick` | Emitted when the button click | event |
| `close` | Emitted when click on the close modal | event ,modalValue |
## Want to Contribute?
- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
- [Fork it](http://help.github.com/forking/).
- Create new branch to contribute your changes.
- Commit all your changes to your branch.
- Submit a [pull request](http://help.github.com/pull-requests/).
---
## Collection of Components
We have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development](https://www.weblineindia.com/software-development-resources.html).
---
## Changelog
Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).
## License
[MIT](LICENSE)
[mit]: https://github.com/weblineindia/ReactJS-MessageDialog/blob/master/LICENSE
## Keywords
react-weblineindia-message-dialog-box, message-dialog-box, react-message-dialog-box, reactjs-message-dialog-box, alertbox, messagedialog, message-dialogbox, react-alertbox