recoil-modals

An npm package that helps to dynamically manage modals using recoil and lazy loading.

Setting up

First install by:

----------------------------
npm install -D recoil-modals
----------------------------

Suggested modal structure:

index.tsx

The createModal function is imported from recoil-modals and is used to create a new modal. It takes a generic PureProps type that defines the props that will be passed to the modal component. The createModal function takes a callback function that dynamically imports the modal component.

import { createModal, loadModal } from "recoil-modals/dist/tools";
import { PureProps } from "./types";

const modal = createModal<PureProps>(
  () => import("./modal" /* webpackChunkName: "DeleteModal" */),
);

export const openDeleteModal = (props: PureProps) => loadModal(modal, props);

modal.tsx

The file should contain the code for your modal window, props will be those that you pass to the loadModal function, also by default, props will contain a function for closing the modal window onClose

import React from "react";
import { Dialog } from "@mui/material";

import { Props } from "./types";

const DeleteModal = ({ onClose, ...ownProps }: Props) => (
  <Dialog onClose={onClose} {...otherProps}>
    ...someContent
  </Dialog>
);

export default DeleteModal;

types.ts

The file should contain the code for your modal window, props will be those that you pass to the loadModal function, also by default, props will contain a function for closing the modal window onClose.

import { ExtendModalProps } from "recoil-modals/dist/types";

export type PureProps = {
  onDelete(): void;
  entity: string;
};

export type Props = ExtendModalProps<PureProps>;

// ^?

/* {
  onClose(): void;
  onDelete(): void;
  entity: string;
} */

ModalProvider Usage:

In your main file needs to place ModalProvider beetween RecoilRoot and your main component

import { RecoilRoot } from "recoil";
import { ModalProvider } from "recoil-modals/dist/provider";

<RecoilRoot>
  <ModalProvider>
     <App />
  </ModalProvider>
</RecoilRoot>

ModalProvider props:

Name	Type	Default value	Description
fallback	React.ReactNode	<></>	It needs for Suspense fallback.
container	Element or DocumentFragment	document.querySelector("body")	It needs for create a portal in that place.
Wrapper	ComponentType<PropsWithChildren>	React.Fragment	It needs to wrap a children.

useShowModal Usage:

Use useShowModal that returns showModal. Needs to it call with open func - the modal created before and modal will be showed.

import { useShowModal } from "recoil-modals/dist/tools";
import { openDeleteModal } from "./modal/DeleteModal"; // import modal from `index.tsx` created above

const Component = () => {
  const showModal = useShowModal();

  const onDelete = useCallback(() => showModal(
    openDeleteModal({
      onDelete: () => {},
      entity: "user",
    }),
  ), [showModal]);
};

License

MIT