# material-ui-dialog-alert

> react material ui dialog alert

Latest version **1.0.0** (published 2021-07-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install material-ui-dialog-alert
pnpm add material-ui-dialog-alert
yarn add material-ui-dialog-alert
bun add material-ui-dialog-alert
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-07-07 |
| First published | 2021-07-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 38.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Rodolphe Jerez |
| Maintainers | codingbyjerez |

## Links

- npm: https://www.npmjs.com/package/material-ui-dialog-alert
- Repository: https://github.com/CodingByJerez/material-ui-dialog-alert
- Homepage: https://github.com/CodingByJerez/material-ui-dialog-alert/issues#readme
- Issues: https://github.com/CodingByJerez/material-ui-dialog-alert/issues
- npm.io page: https://npm.io/package/material-ui-dialog-alert

## Recent versions

- 1.0.0 (latest) — 2021-07-07

## README

# material-ui-dialog-alert

> Made with create-react-library

[![NPM](https://img.shields.io/npm/v/material-ui-dialog-alert.svg)](https://www.npmjs.com/package/material-ui-dialog-alert) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

#### yarn
```bash
yarn add material-ui-dialog-alert
```

#### npm
```bash
npm install --save material-ui-dialog-alert
```

## Usage

```tsx
const Child = () => {
  const clickHandler = () => {
    DialogAlert.show({
      closeOnOverlayTap: false,
      dialogProps: undefined, // dialogProps (optional)
      title: 'My title', // string (optional),
      description: 'my description', // string or JSX.Element (optional),
      buttons: [
        {
          title: 'Cancel',
          buttonProps: { color: 'secondary' },
          onClick: () => {
            console.log('callback button Cancel');
            DialogAlert.hide();
          },
        },
        {
          title: 'Ok',
          buttonProps: { color: 'primary' },
          onClick: async () => {
            alert('callback button Ok');
            DialogAlert.hide();
          },
        },
      ],
      onClose: () => console.log('dialog alert is close'), // (optional)
    });
  };
  return <button onClick={clickHandler}>Test My</button>;
};

const Parent = () => {
  const [dialogProps] = useState<Partial<DialogProps>>({ maxWidth: 'xs' }); // (optional)

  return (
    <DialogAlertRoot dialogProps={dialogProps} closeOnOverlayTap={false}>
      <Child />
    </DialogAlertRoot>
  );
};

export default Parent;
```
## Usage

### Root Component
A React node that will be most likely wrapping your whole app.

| Name                | Description                                         | Require  | Default  | Type                              |
| ------------------- | --------------------------------------------------- | -------- | -------- | --------------------------------- |
|dialogProps|  |  |  | Partial\<DialogProps> |
|closeOnOverlayTap|allow close if click in overlay| |  false | bool |


### Dialog Box Component
| Name                | Description                                         | Require  | Default  | Type                              |
| ------------------- | --------------------------------------------------- | -------- | -------- | --------------------------------- |
| title               | The title text                                      |   false  |          | String                            |
| description         | The description text  or   JEX.Element              |   false  |          | String                            |
| buttons             | buttons                                             |   true   |          | [IButton] OR [IButton, IButton]    |
|closeOnOverlayTap|allow close if click in overlay| |  false | bool |
| dialogProps             |                                              |      |          | Partial\<DialogProps>    |


```ts

type IButton = { buttonProps?: ButtonProps; title: string; onClick: () => void };

export type IConfig = {
  closeOnOverlayTap?: boolean;
  dialogProps?: Partial<DialogProps>;
  title: string;
  description: string | ReactElement;
  buttons: [IButton] | [IButton, IButton];
};
```


## License

MIT © [CodingByJerez](https://github.com/CodingByJerez) Rodolphe Jerez

---
_Source: https://npm.io/package/material-ui-dialog-alert · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._