@drawbotics/modal

Basic modal component used in Drawbotics applications.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@drawbotics/modal
Minified + gzip package size for @drawbotics/modal in KB

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.