@abdulghani/react-promise-modal v1.0.3

React Promise Modal

Render your own react modal component with a function call

Installation

npm

npm install @abdulghani/react-promise-modal

yarn

yarn add @abdulghani/react-promise-modal

Usage

  // other imports
  import createPromiseModal from "@abdulghani/react-promise-modal";
  
  // plug your component to it
  const showModal = createPromiseModal(MyModalComponent);

  // use it in your component/app
  const App = () => {
    const onClick = () => {
      showModal({
        title: "hello",
        body: "world",
        onConfirm: () => yourFunction(),
        // other configs
      });
    }

    return (
      <div>
        <button type="button" onClick={onClick}>Click Me</button>
      </div>
    );
  }

Setup your component

Your component could take any props you want and fill the props with the showModal(config) config object. and your component going to need to call onClose method inside the component that's plugged to your component props to simply close the component.

  // imports

  const MyModalComponent = props => {
    const { onClose } = props;  // plugged by the library
    const { title, body, onConfirm } = props; // plugged on your call

    const onOk = () => {
      onConfirm();
      onClose();  // also close the modal
    }

    return (
      <div className="modal">
        <div className="modal-header">
          {title}
        </div>
        <div className="modal-body">
          {body}
        </div>
        <div className="modal-footer">
          <button className="red" type="button" onClick={onClose}>Cancel</button>
          <button className="blue" type="button" onClick={onOk}>Ok</button>
        </div>
      </div>
    );
  }

If you have different/custom root node

If you have/rename different root node for your application. you could set the createPromiseModal to point to your node id.

  const showModal = createPromiseModal(MyModalComponent, "my-custom-root"); // currently it takes string id