material-ui-dialog-alert

Made with create-react-library

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