@drawbotics/modal

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
    }
  }
}