@prezly/react-promise-modal
v0.3.1
Published
The proper (and easy) way of doing modals in React. With Promises.
Downloads
3,850
Readme
React Promise Modal
The easies way of using modals in React. With Promises.
Usage
reactModal()
function accepts a render callback that renders a modal from given three arguments:
show
— boolean to tell if the window is visible or not. Used for in/out transitions. Primarily intended to be used as react-bootstrap Modalshow
property.onDismiss
— should be invoked when a modal is dismissed. Always resolves the promise toundefined
.onSubmit
— should be invoked when a modal is submitted/confirmed. Resolves totrue
if no arguments given. But you can pass any value as argument to defined resolve value. For obvious reason this value cannot beundefined
.
The function returns a Promise that is resolved with an undefined
if the modal was dismissed
or true
(or any value you provide) when it's submitted.
import reactModal from '@prezly/react-promise-modal';
const result = await reactModal(({ show, onSubmit, onDismiss }) => (
// Use any modal implementation
<Modal show={show} onHide={onDismiss}>
OK?
<button onClick={onDismiss}>Cancel</Button>
<button onClick={() => onSubmit('OK Clicked')}>OK</Button>
</Modal>
));
if (result === undefined) {
console.log('The modal was dismissed or cancelled');
} else {
console.log(result); // outputs "OK Clicked"
}
Confirmation
You can easily implement a confirmation modal using reactModal()
:
import reactModal from '@prezly/react-promise-modal';
import { Modal } from 'react-bootstrap';
const isConfirmed = await reactModal(({ show, onSubmit, onDismiss }) => (
// Use any modal window implementation you need.
// We're using React Bootstrap Modal for demo purposes here
<Modal.Dialog show={show} onHide={onDismiss}>
<Modal.Body>
Confirm you really want to star this repository.
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onDismiss}>Cancel</Button>
<Button variant="primary" onClick={onSubmit}>Confirm</Button>
</Modal.Footer>
</Modal.Dialog>
));
Alert
import reactModal from '@prezly/react-promise-modal';
import { Modal } from 'react-bootstrap';
await reactModal(({ show, onDismiss }) => (
// Use any modal window implementation you need.
// We're using React Bootstrap Modal for demo purposes here
<Modal.Dialog show={show} onHide={onDismiss}>
<Modal.Header>
Error
</Modal.Header>
<Modal.Body>
An error occured. Can‘t fix it.
</Modal.Body>
<Modal.Footer>
<Button variant="primary" onClick={onDismiss}>OK</Button>
</Modal.Footer>
</Modal.Dialog>
));
Prompt user input
import reactModal from '@prezly/react-promise-modal';
import { Modal } from 'react-bootstrap';
class FilenamePromptModal extends Component {
static propTypes = {
show: PropTypes.bool.isRequired,
onSubmit: PropTypes.func.isRequired,
onDismiss: PropTypes.func.isRequired,
};
state = {
filename: 'Untitled.txt',
};
handleChange = (event) => {
this.setState({ filename: event.target.value });
};
handleSubmit = () => {
this.props.onSubmit(this.state.filename);
};
render() {
const { show, onDismiss } = this.props;
return (
<Modal.Dialog show={show} onHide={onDismiss}>
<form onSubmit={this.handleSubmit}>
<Modal.Body>
<p>Please enter filename:</p>
<input autoFocus value={this.state.filename} onChange={this.handleChange} />
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onDismiss}>Cancel</Button>
<Button variant="primary" type="submit">Confirm</Button>
</Modal.Footer>
</form>
</Modal.Dialog>
);
}
}
const filename = await reactModal(({ show, onSubmit, onDismiss }) => (
// Use any modal window implementation you need.
// We're using React Bootstrap Modal for demo purposes here
<FilenamePromptModal show={show} onSubmit={onSubmit} onDismiss={onDismiss} />
));
Brought to you with :metal: by Prezly.