mui-prompt
v1.0.5
Published
Easy, simple, stackable and global prompt and popover
Downloads
5
Maintainers
Readme
Mui-Prompt
Awesome and simple prompt components
with mui-prompt you can easily ask user for confirmation before executing an important action
Demo
Dialog
Inline
Demo
Install it
Mui-Prompt uses standard theme provider and will take your theme aswell!
[email protected]:~$ npm i mui-prompt
Import it
import Prompt from "mui-prompt";
Dialog variant
render the prompt view
export default class PromptDemo extends React.Component {
render() {
function simplePrompt() {
Prompt.ask("simple", {
callback: status => {
console.log(status);
},
});
}
return (
<div>
<Prompt.View />
<button onClick={simplePrompt}>click me!</button>
</div>
);
}
}
API
Prompt.ask first parameter is the key
of dialog and second parameter is the configuration which can be these values
const config = {
callback: callback,
title: "Are you sure?",
body: "This action can not be undone!",
cancel: "Cancel",
continue: "Continue",
nested: false,
};
Note:
nested
should be only applied on the parents and not the last nested item
Inline variant
In order to use inline variant simply wrap your Button
, IconButton
or any other component you want with Prompt.Inline
component
export default class InlineDemo extends React.Component {
render() {
return (
<div>
<Prompt.Inline variant="button">
<button onClick={simplePrompt}>click me!</button>
</Prompt.Inline>
<Prompt.Inline variant="icon">
<button onClick={simplePrompt}>click me!</button>
</Prompt.Inline>
</div>
);
}
}
Component props
<Prompt.Inline
variant={"button" || "icon"}
cancelText="Cancel"
continueText="Continue"
cancelIcon={CancelIcon}
continueIcon={DeleteIcon}
callback={callback}
/>