Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@prezly/react-promise-modal
Advanced tools
The proper (and easy) way of doing modals in React. With Promises.
The easies way of using modals in React. With Promises.
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 Modal show
property.
onDismiss
— should be invoked when a modal is dismissed.
Always resolves the promise to undefined
.
onSubmit
— should be invoked when a modal is submitted/confirmed.
Resolves to true
if no arguments given.
But you can pass any value as argument to defined resolve value.
For obvious reason this value cannot be undefined
.
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"
}
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>
));
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>
));
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.
FAQs
The proper (and easy) way of doing modals in React. With Promises.
The npm package @prezly/react-promise-modal receives a total of 1,806 weekly downloads. As such, @prezly/react-promise-modal popularity was classified as popular.
We found that @prezly/react-promise-modal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.