material-ui-dialog-alert
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

material-ui-dialog-alert

Made with create-react-library

NPM JavaScript Style Guide

Install

yarn

yarn add material-ui-dialog-alert

npm

npm install --save material-ui-dialog-alert

Usage

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>
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 Rodolphe Jerez

Readme

Keywords

none

Package Sidebar

Install

npm i material-ui-dialog-alert

Weekly Downloads

0

Version

1.0.0

License

MIT

Unpacked Size

39.2 kB

Total Files

10

Last publish

Collaborators

  • codingbyjerez