1.1.5 • Published 11 months ago

react-inline-modal v1.1.5

Weekly downloads
-
License
MIT
Repository
github
Last release
11 months ago

React Inline Modal

Use React modals directly in your handlers to align with the user's experience.

const handleClick = async () => {
  // Collect user input asynchronously
  // (ConfirmationModal is a React component)
  const confirmation = await modal.show(ConfirmationModal, {
    // Pass props to the modal
    message: "Are you sure?",
  });

  // Handle logical branches
  if (!confirmation) return;

  // Continue with the happy path
  alert("Proceeding...");
};

Quick Start

Add the InlineModalProvider to your app:

import { InlineModalProvider } from "react-inline-modal";

const App = () => {
  return (
    <InlineModalProvider>
      <MyContent />
    </InlineModalProvider>
  );
};

Prepare your modal:

// Bring your own stylized modal
import { Modal } from "any-component-library";

const ConfirmationModal = ({ resolve, message }) => {
  return (
    <Modal open onClose={() = resolve(false)}>
      <h1>{message}</h1>
      <button onClick={() => resolve(true)}>Yes</button>
      <button onClick={() => resolve(false)}>No</button>
    </Modal>
  );
};

Use the modal in a handler:

const DeleteButton = () => {
  const modal = useInlineModal();

  const handleClick = async () => {
    const confirmation = await modal.show(ConfirmationModal, {
      message: "Are you sure?",
    });

    if (!confirmation) return;

    alert("Proceeding...");
  };

  return <button onClick={handleClick}>Delete</button>;
};
1.1.5

11 months ago

1.1.4

11 months ago

1.1.3

11 months ago

1.1.2

11 months ago

1.1.1

11 months ago

1.1.0

11 months ago

1.0.2

11 months ago

1.0.1

11 months ago

1.0.0

11 months ago