<InputDialog />
@webstencils/ui
Provides a minimal implementation of an input dialog with customizable options.
Reference
Props
title
string - optional, dialog title, defaults toConfirm
hideCancelButton
boolean - optional, hidesCancel
buttoncancelText
string - optional, custom text forCancel
button, defaults toCancel
submitText
string - optional, custom text forSubmit
button, defaults toOK
defaultValue
string - optional, default valueminWidth
string - optional, minimal content with, defaults to400px
labelText
string - optional, input label text, defaults toValue
onCancel
() => void - optional, cancel click handleronSubmit
(value: string): void - optional, submit click handler...props
Object - the props of the element
Example
import { useEditor } from '@webstencils/core';
import { InputDialog, useDialog } from '@webstencils/ui';
function MyComponent() {
const [openDialog, closeDialog] = useDialog();
const onHandleButtonClick = () => {
openDialog({
children: (
<InputDialog
title={'Some input'}
submitText="Submit"
labelText="Name"
defaultValue="Hello world"
onCancel={closeDialog}
onSubmit={(value) => {
closeDialog();
console.log(value);
}}
/>
)
});
};
return (
<>
<button onClick={onHandleButtonClick}>
Show input dialog
</button>
</>
)
}