1.0.0 • Published 3 years ago
material-ui-dialog-alert v1.0.0
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\ | |||
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\ |
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
1.0.0
3 years ago