react-dialogs-container

react-dialogs-container

Lightweight hooks-ready library for managing dialogs in React applications.

Installation

npm i react-dialogs-container

Setup

• Wrap your application with DialogsProvider
• Add DialogsContainer component inside the provider

Quick Start

import {
  DialogsContainer,
  DialogsProvider,
  useDialogs,
} from "react-dialogs-container";

const App = () => {
  const { pushDialog } = useDialogs();

  const handleOpenModal = () => {
    pushDialog(ModalComponent, { title: "My Dialog" });
  };

  return (
    <button onClick={handleOpenModal}>
      Open Dialog
    </button>
  );
};

const Root = () => (
  <DialogsProvider>
    <App />
    <DialogsContainer />
  </DialogsProvider>
);

Usage Examples

Basic Example with Component

import { useDialogs } from "react-dialogs-container";

const MyDialog = ({ closeDialog, message }) => {
  return (
    <div className="modal">
      <div className="modal-content">
        <p>{message}</p>
        <button onClick={closeDialog}>Close</button>
      </div>
    </div>
  );
};

const App = () => {
  const { pushDialog } = useDialogs();

  return (
    <button onClick={() => pushDialog(MyDialog, { message: "Hello!" })}>
      Open Dialog
    </button>
  );
};

Using React Element

import React from "react";
import { useDialogs } from "react-dialogs-container";

const App = () => {
  const { pushDialog } = useDialogs();

  const handleClick = () => {
    pushDialog(
      React.createElement(MyDialog, { message: "Dialog from element" }),
    );
  };

  return <button onClick={handleClick}>Open</button>;
};

Using JSX Element Directly

import { useDialogs } from "react-dialogs-container";

const MyDialog = ({ closeDialog, title }) => {
  return (
    <div className="modal">
      <h2>{title}</h2>
      <button onClick={closeDialog}>Close</button>
    </div>
  );
};

const App = () => {
  const { pushDialog } = useDialogs();

  const handleClick = () => {
    // Можно передать компонент напрямую как JSX элемент
    pushDialog(<MyDialog title="My Dialog" />);
  };

  return <button onClick={handleClick}>Open Dialog</button>;
};

Closing Dialog from Inside

import { useDialog } from "react-dialogs-container";

const MyDialog = ({ title }) => {
  const { closeDialog } = useDialog();

  return (
    <div className="modal">
      <h2>{title}</h2>
      <button onClick={closeDialog}>Close</button>
    </div>
  );
};

Using Close Function

const App = () => {
  const { pushDialog } = useDialogs();

  const handleOpen = () => {
    const closeDialog = pushDialog(MyDialog, { title: "Dialog" });

    // Close dialog programmatically
    setTimeout(() => {
      closeDialog();
    }, 3000);
  };

  return <button onClick={handleOpen}>Open with Auto-Close</button>;
};

Temporary Dialogs with Auto-Close

import { useDialogs } from "react-dialogs-container";

const App = () => {
  const { pushTempDialog } = useDialogs();

  const handleOpen = () => {
    // Dialog will automatically close when component unmounts
    pushTempDialog(MyDialog, { title: "Temporary Dialog" });
  };

  return <button onClick={handleOpen}>Open Temporary Dialog</button>;
};

API

Components

DialogsProvider

Context provider for managing dialogs. Should wrap your application.

Props:

• children: ReactNode - child elements

DialogsContainer

Component for rendering all active dialogs. Should be placed inside DialogsProvider.

Hooks

useDialogs

Main hook for managing dialogs.

Returns:

• pushDialog(component, props?): CloseDialogFn - opens a new dialog
  • component: ComponentType<DialogProps> | ReactElement - component, React element, or JSX element (e.g., <MyDialog />)
  • props?: Record<string, any> - props for the component (ignored if component is already a ReactElement)
  • Returns a function to close the dialog
• closeDialogByID(dialogID: number): void - closes dialog by ID
• pushTempDialog(component, props?): CloseDialogFn - opens a temporary dialog (automatically closes when component unmounts)

useDialog

Hook for accessing dialog methods from inside a dialog component.

Returns:

• closeDialog(): void - function to close the current dialog

Types

interface DialogProps {
  closeDialog: () => void;
  [key: string]: any;
}

type CloseDialogFn = () => void;

interface DialogItem {
  component: ComponentType<DialogProps> | ReactElement;
  props: Record<string, any>;
  dialogID: number;
}

Requirements

• React >= 16
• ReactDOM >= 16

Example on CodeSandbox

License

MIT