@giladappsforce/react-modal-provider
v1.0.8
Published
Modal provider for react
Downloads
118
Readme
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>
);
};