@drawbotics/modal
v3.0.1
Published
Basic modal component used in Drawbotics applications.
Downloads
9
Keywords
Readme
Modal
A basic modal component used in Drawbotics applications. It only provides the functionality (hide/show) and animations, meaning that, the style of the final component would have to be implemented at the application level.
Installation
Install it as usual with npm:
$ npm i @drawbotics/modal
Usage
This is a controlled component so the visibility of the modal is managed by the parent component. We can toggle the modal by using the prop isVisible
. Remember that by default, the modal doesn't provide any styling, it's just a container for our actual modal component (the one with styling). A basic example is:
import React from 'react';
import { StyleSheet, css } from 'aphrodite-jss';
import Modal from '@drawbotics/modal';
const styles = StyleSheet.create({
route: {
},
modal: {
background: 'white',
padding: 32,
},
});
class MyRoute extends React.Component {
state = {
isVisible: false,
};
render() {
const { isVisible } = this.state;
return (
<div className={css(styles.route)}>
<button onClick={() => this.setState({ isVisible: true })}>
Open Modal
</button>
<Modal isVisible={isVisible} onClickOverlay={() => this.setState({ isVisible: false })}>
<div className={css(styles.modal)}>
Hello World
</div>
</Modal>
</div>
);
}
}
export default MyRoute;
BaseModal
If you want to start with a basic style, you can use BaseModal
instead of a generic div
inside the Modal
component. It provides a unified style and a close button on the corner. You can bind an event listener to the close button with the onClickClose
prop.
import Modal, { BaseModal } from '@drawbotics/modal';
//...
<Modal isVisible={isVisible}>
<BaseModal className={styles.myModal}>
Rest of the component
</BaseModal>
</Modal>
//...
ConfirmModal
If you want to display a confirmation modal to let the user continue or cancel an action, you can use the ConfirmModal
component. It works by enhancing the children with a confirm
action that will trigger the modal and the corresponding cancel/continue behavior.
import React from 'react';
import { BaseModal, ConfirmModal } from '@drawbotics/modal';
const MyConfirmModal = ({
children,
}) => {
return (
<ConfirmModal enhance={children}>
{(onClickConfirm, onClickCancel) => (
<BaseModal>
<p>
A warning message
</p>
<button onClick={onClickConfirm}>Confirm</button>
<button onClick={onClickCancel}>Cancel</button>
</BaseModal>
)}
</ConfirmModal>
);
};
class MyComponent extends React.Component {
render() {
return (
<MyConfirmModal>
{(confirm) => (
<button onClick={() => this._handleClick(confirm)}>
My Action
</button>
)}
</MyConfirmModal>
);
}
async _handleClick(confirm) {
const confirmed = await confirm();
if (confirmed) {
// do something
}
}
}