function to create function based modal to render custom react component independently

Usage no npm install needed!

<script type="module">
  import abdulghaniReactPromiseModal from 'https://cdn.skypack.dev/@abdulghani/react-promise-modal';


React Promise Modal

Render your own react modal component with a function call



npm install @abdulghani/react-promise-modal


yarn add @abdulghani/react-promise-modal


  // 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 = () => {
        title: "hello",
        body: "world",
        onConfirm: () => yourFunction(),
        // other configs

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

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 = () => {
      onClose();  // also close the modal

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

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