@giladappsforce/react-modal-provider

React modal provider

This package is used to simplify the use of modals across your app

Installation

Install react modal provider with npm

npm install @giladappsforce/react-modal-provider

or yarn

yarn add @giladappsforce/react-modal-provider

Usage/Examples

// modalProvider.tsx
import { createModalProvider } from "@giladappsforce/react-modal-provider";
import { ConfirmModal, InfoModal } from "./modals";

export const modals = {
  confirm: ConfirmModal,
  info: InfoModal,
  // rest of modals
};

export const { useModal, ModalProvider } = createModalProvider(modals);

// main.tsx / app.tsx
import ReactDOM from 'react-dom/client';
import {ModalProvider} from '../modalProvider';
import App from '../App';

ReactDOM.createRoot(document.getElementById('root') as HTMKElement).render(
    <ModalProvider>
        <App />
    </ModalProvider>
)

// ConfirmModal.tsx

// This example uses MUI Dialog

import { Button, Dialog, DialogActions, DialogTitle } from "@mui/material";
import { BaseModalProps } from "@giladappsforce/react-modal-provider/src/types";

interface Props extends BaseModalProps {
  onConfirm: () => void;
  title?: string;
  confirmText?: string;
  cancelText?: string;
}

export const ConfirmModal = ({
  open,
  onClose,
  onConfirm,
  title,
  confirmText,
  cancelText,
}: Props) => {
  const handleConfirm = () => {
    onConfirm();
    onClose?.();
  };

  return (
    <Dialog open={open || false} onClose={onClose}>
      <DialogTitle>{title || "Are you sure?"}</DialogTitle>
      <DialogActions>
        <Button onClick={onClose}>{cancelText || "Cancel"}</Button>
        <Button onClick={handleConfirm}>{confirmText || "Confirm"}</Button>
      </DialogActions>
    </Dialog>
  );
};

// In component
import { useModal } from "@giladappsforce/react-modal-provider/src";

interface Props {}

export const MyComponent = (props: Props) => {
  const { openModal } = useModal();
  return (
    <div>
      <h1>Example component</h1>
    </div>
  );
};

Authors

• gilad varsano
• shalve sharabi

License

MIT