{"id":26501028,"url":"https://github.com/bigyanpoudel/react-global-modal","last_synced_at":"2026-03-11T17:01:12.801Z","repository":{"id":57839761,"uuid":"527861124","full_name":"bigyanpoudel/react-global-modal","owner":"bigyanpoudel","description":"Use modal in any component with in the application without any pain 😭","archived":false,"fork":false,"pushed_at":"2024-05-16T08:19:32.000Z","size":425,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-09T06:35:00.399Z","etag":null,"topics":["modal","modal-dialogs","modals","react","react-global-modal","react-modal"],"latest_commit_sha":null,"homepage":"https://react-global-modal.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bigyanpoudel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-23T06:28:46.000Z","updated_at":"2024-05-16T08:19:35.000Z","dependencies_parsed_at":"2024-05-16T08:54:25.547Z","dependency_job_id":null,"html_url":"https://github.com/bigyanpoudel/react-global-modal","commit_stats":{"total_commits":98,"total_committers":3,"mean_commits":"32.666666666666664","dds":"0.24489795918367352","last_synced_commit":"b140b400c1918bf5b5da62751514ff9ed2f214ec"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigyanpoudel%2Freact-global-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigyanpoudel%2Freact-global-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigyanpoudel%2Freact-global-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigyanpoudel%2Freact-global-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bigyanpoudel","download_url":"https://codeload.github.com/bigyanpoudel/react-global-modal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244648307,"owners_count":20487239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["modal","modal-dialogs","modals","react","react-global-modal","react-modal"],"created_at":"2025-03-20T16:25:29.138Z","updated_at":"2026-03-11T17:01:12.725Z","avatar_url":"https://github.com/bigyanpoudel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Global Modal\nReact Global Modal is a lightweight, simple, customizable and ready to use modal in the global scope in the react project.\n\n[![npm version](https://img.shields.io/npm/v/react-global-modal.svg?style=flat-square)](https://www.npmjs.com/package/react-global-modal)\n[![npm downloads](https://img.shields.io/npm/dm/react-global-modal.svg?style=flat-square)](https://www.npmjs.com/package/react-global-modal)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-global-modal)\n\n## Features\n\n- Lightweight\n- Build in simple modal, slide pane, confirmation modal and async confirmation modal\n- Fully constomizable and can be used with any UI framework\n- Invoked as a method so reduces the code base\n- Promotes reusability\n- Easy to maintain\n- Enhance the performance as the main component never re-render when opening the modal\n- Multiple modal can be pushed on top of another\n\n## Table of Contents\n  - [Installation](#installation)\n  - [Usage](#usage)\n      - [Configure React Global Modal](#1-configure-react-global-modal)\n      - [Triggering exposed modal methods](#2-triggering-exposed-modal-methods)\n  - [Examples](#examples)\n  - [Modal as a SlidePane](#modal-as-a-slidepane)\n  - [Confirmation Modal](#confirmation-modal)\n  - [Async confirmation Modal](#async-confirmation-modal)\n  - [Important Note for TypeScript Users](#important-note-for-typescript-users)\n\n## Installation\n\nTo install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):\n\n    $ npm install react-global-modal\n    $ yarn add react-global-modal\n\n## Usage\n\nIn order to use, you must follow the steps below:\n\n#### 1. Configure React Global Modal\n\nAt first, you need to configure the modal at the root of your project as shown bellow\n\n```jsx\nimport React, { useEffect } from 'react'\nimport { GlobalModalWrapper, GlobalModal } from 'react-global-modal'\nimport 'react-global-modal/dist/style.css'\n\nlet globalModalRef: any = null\n\nfunction App() {\n  useEffect(() =\u003e {\n    GlobalModal.setUpModal(globalModalRef)\n  }, [])\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cGlobalModalWrapper ref={(el) =\u003e (globalModalRef = el)} /\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\nHere ``` GlobalModal.setUpModal ``` methods register our modal by storing the reference of the modal obtained from the ``` GlobalModalWrapper ```.  ``` react-global-modal/dist/style.css ``` is the styles of the modal which you also need to import in the root file of the project.\n\n#### 2. Triggering exposed modal methods\n\nThe ``` GlobalModal``` consist of set method using which we can open and close the modal and also can update the props passed to the modal. It consist of following methods:\n\n    1. setUpModal\n    2. push\n    3. pop\n    4. add\n    5. closeAll\n\n##### 1. setUpModal\nYou can use this method to register the modal reference and should be defined in the root of the project as mention above in [Configure React Global Modal](#1-configure-react-global-modal)\n\n##### 2. push\nYou can use this method to open the modal which conatin a list of props along with the component that we want to display inside the modal.\n\n```jsx\n  const openModal = async () =\u003e {\n    GlobalModal.push({\n      component:Component, //Component represent the component that you want to display inside the modal\n      title:\"Modal title\" //modal title\n      props:{   //props object are represented as the props to the component\n        data:data   \n      }\n    })\n  }\n```\nThe methods contain different others properties which are described below:\n\n|   Props                       |  Types                            | Required             | Default        | Description                               |\n|   --------------------------  |  -------------------------------  | --------------------:| -------------: | -----------------------------------------:|\n| component                     |  React.FC\u003cany\u003e                    | ✅                   |                | Main component that will be displayed inside modal|\n| props                         | { [key: string]: unknown }        |                      |                | It include the props of the component which can be accessed inside the modal |\n| onClose                       | Function                          |                      |                | Is used to perfrom certain action when the modal is about to close |\n| className                     | string                            |                      |                | It is used to provde the styles for outermost element of the modal and can be used accordingly with custom modal |\n| modalSize                     | 'xs' , 'sm'  ,'md' , 'lg'         | ✅                   | md             | It is used to control the width of the modal |\n| isCloseable                   | boolean                           |                      | false          | It indicate wheather the modal can be closed or not. If true, you can only close the modal manualy from the component inside the modal using the modal close method |\n|  closeButtonClassName         | string                            |                      |                | It is used to style the close icon that is present inside the modal |\n| title                         | string                            |                       |               | If you want to have a title in the modal you can use it.\n|  hideHeader                   | boolean                           |                       | false         | It is used to hide the deafult heading component present in the modal |\n| headerComponent               |   React.FC\u003cany\u003e                   |                       |               | You can pass the custom heading component in the modal |\n|  headerClassName              | string                            |                       |               | It is used to style the heading the component |\n|  actions                      |    IButtonProps[]                 |                       |               | It includes the list of button that can be included in the bottom of the modal |\n|  actionClassName              | string                            |                       |               | It is used to style the footer of the component |\n|   contentClassName            | string                            |                       |               | It is used to style the wrapper which wraps the passed component to the modal |  \n|  hideCloseIcon                | boolean                           |                       |               | It is used to hide the close icon from the modal |\n|   width                       | string                            |                       |               | It is used to include the custom width to the modal |\n|isSlidePane                    | boolean                           |                       | false         | If it is true, then the modal will act as the slidePane and will be in right or left |\n| position                      |  'right' , 'left'                 |                       | right         | It can only be used when the ``` isSlidePane ```   is true. Using this you can align the slidPane to right or left |\n| footer                     |  React.ReactNode                |                       |          | You can pass custom footer to the modal |\n| closeIconComponent                    |  React.ReactNode                |                       |          | You can pass custom footer to the modal |\n\n##### 3. pop\nYou can use this method to close the modal. In order to simply close the modal you can use like below:\n```jsx\n\n    GlobalModal.pop()\n\n```\n#### 4. add\nYou can use this method for updating any props values inside the modal. And this can be triggered from outside the modal as well as inside the modal\n\n```jsx\n\n GlobalModal.add({\n      props: {       // this is the updated props which will be passed to the component inside the modal\n        value: newValue, \n      },\n      modalIndex: 0,  // it indicate current number of modal open\n })\n\n```\nIn above method, ``` modalIndex ``` represents the index of opened modal. If you have one modal opened, then ``` modalIndex ``` will be 0 else if you have second modal opened on top of first one then the``` modalIndex ``` will be 1 and soon. \n\n##### 5. closeAll\nYou can use this method to close all the modal that are opened. In order to simply close all the modal that you have opened previously you can use like below:\n```jsx\n\n    GlobalModal.closeAll()\n\n```\n### Examples\n\n#### 1. Simple example with in built header and no footer\n```jsx\nconst Example = () =\u003e {\n  const openModal = async () =\u003e {\n    GlobalModal.push({\n      component: ComponentText,\n      props: {\n        test: 'Testing',\n      },\n    })\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={openModal}\u003eOpen\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\nconst ComponentText = ({ test }: { test: string }) =\u003e {\n  return (\n    \u003cdiv\n      style={{\n        height: '400px',\n      }}\n    \u003e\n      hello {test}\n    \u003c/div\u003e\n  )\n}\nexport default Example\n```\n#### 2. Simple example with header and  footer inside component\n```jsx\nimport React from 'react'\nimport { GlobalModal } from 'react-global-modal'\n\nconst Example = () =\u003e {\n  const openModal = async () =\u003e {\n    GlobalModal.push({\n      component: ComponentText,\n      props: {\n        test: 'Testing',\n      },\n      hideHeader: true,\n    })\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={openModal}\u003eOpen\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\nconst ComponentText = ({ test }: { test: string }) =\u003e {\n  return (\n    \u003cdiv\n      style={{\n        height: '400px',\n      }}\n    \u003e\n      \u003cdiv\n        style={{\n          height: '2rem',\n        }}\n      \u003e\n        Header\n      \u003c/div\u003e\n      hello {test}\n      \u003cdiv\n        style={{\n          position: 'absolute',\n          left: 0,\n          bottom: 0,\n          width: '100%',\n          borderTop: '1px solid rgb(230 232 240)',\n        }}\n      \u003e\n        \u003cdiv\n          style={{\n            display: 'flex',\n            flexDirection: 'row',\n            padding: '8px 10px',\n            justifyContent: 'flex-end',\n            gridGap: '5px',\n          }}\n        \u003e\n          \u003cbutton className=\"btn btn-error\"\u003eClose\u003c/button\u003e\n          \u003cbutton className=\"btn btn-primary\"\u003e okay\u003c/button\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\nexport default Example\n\n```\nYou can also include the header and footer in the component which will by displayed inside the modal but you have to disable the header present inside the modal by passing the props ``` hideHeader: true ```\n\n## Modal as a SlidePane\nThe slide pane are the one that appears on the side that may be left or right of the screen. You can open existing modal as the slide pane:\n\n```jsx\nimport React from 'react'\nimport { GlobalModal } from 'react-global-modal'\n\nconst Example = () =\u003e {\n  const openModal = async () =\u003e {\n    GlobalModal.push({\n      component: ComponentText,\n      props: {\n        test: 'Testing',\n      },\n      hideHeader: true,\n      isSlidePane: true,\n    })\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={openModal}\u003eOpen\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\nconst ComponentText = ({ test }: { test: string }) =\u003e {\n  return (\n    \u003cdiv\n      style={{\n        height: '400px',\n      }}\n    \u003e\n      \u003cdiv\n        style={{\n          height: '2rem',\n        }}\n      \u003e\n        Header\n      \u003c/div\u003e\n      hello {test}\n      \u003cdiv\n        style={{\n          position: 'absolute',\n          left: 0,\n          bottom: 0,\n          width: '100%',\n          borderTop: '1px solid rgb(230 232 240)',\n        }}\n      \u003e\n        \u003cdiv\n          style={{\n            display: 'flex',\n            flexDirection: 'row',\n            padding: '8px 10px',\n            justifyContent: 'flex-end',\n            gridGap: '5px',\n          }}\n        \u003e\n          \u003cbutton className=\"btn btn-error\"\u003eClose\u003c/button\u003e\n          \u003cbutton className=\"btn btn-primary\"\u003e okay\u003c/button\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\nexport default Example\n\n```\nYou can open slide pane by passing the props ``` isSlidePane: true ``` while opening the modal. Their is additional properties for side pane that is position which determines whether you want it be right or left.\n\n## Confirmation Modal\nConfirmation modal is can be used to ask the user to perform the certain operation. You can invoke the confirmation similarly to that of normal modal.\n\n```jsx\nimport React from 'react'\nimport { ConfirmationModal } from 'react-global-modal'\n\nconst Example = () =\u003e {\n  const openModal = async () =\u003e {\n    ConfirmationModal({\n      onCancel: () =\u003e {\n        // TODO when user tigger cancel action\n      },\n      onOkay: () =\u003e {\n        //TODO when user tigger okay action\n      },\n      okayLabel: 'Continue',\n      cancelLabel: 'Back',\n    })\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={openModal}\u003eOpen\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\n```\nThe confirmation modal can be used like above. It consist of list of properties which are descriped below:\n\n|   Props                       |  Types                            | Required             | Default        | Description                               |\n|   --------------------------  |  -------------------------------  | --------------------:| -------------: | -----------------------------------------:|\n| confirmationBody              |  React.FC                         |                      |                | Main component that will be displayed inside modal|\n| title                         | string                            |                      |                | It is the title of the confirmation modal |\n| message                       | string                            |                      |                |  It is the message that is display inside the body of the modal  |\n| onCancel                      | Function                          |                      |                | It is used to perfrom certain action when the user tigger the cancel action |\n|  onOkay                       | Function                          |                       |               | It is used to perform certain action when the user tigger the okay action |\n| cancelLabel                   | string                            |                      |                | onCancel action tittle                    |\n| okayLabel                     | string                            |                      |                | onOkay action title                       |\n| isCloseable                   | boolean                           |                      | true           | It indicate wheather the modal can be closed or not. If true, you can only close the modal manualy from the component inside the modal using the modal close method |\n| className                     | string                            |                      |                | It is used to provde the styles for outer most element of the modal |\n| confirmationClassName         | string                            |                      |                | It is used to provde the styles for inner most content of the modal |\n| actions                       | IButtonProps[]   | any[]                 |                      |                 | You can define your own custiom actions list |\n| footer                       | React.ReactNode                 |                      |                 | You can pass custom footer to the modal |\n|  okyActionProps              | Record\u003cany,any\u003e                 |                      |                 | Adjust the styling of the okay or positive action button. |\n| cancelActionProps            | Record\u003cany,any\u003e                 |                      |                 | Adjust the styling of the cancel or negative action button |\n\n\n## Async Confirmation Modal\nYou can use this modal to perfrom certain action based on the user response.\n\n```jsx\n\nimport React from 'react'\nimport { AsyncConfirmationModal} from 'react-global-modal'\n\nconst Example = () =\u003e {\n  const openModal = async () =\u003e {\n    const res = await AsyncConfirmationModal({\n      title: 'This is testing',\n      message: 'This is message',\n    })\n    if (res) {\n      //TODO if yes agree or press okay\n    } else {\n      //TODO if user doesn't agree or press cancel\n    }\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={openModal}\u003eOpen\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\nexport default Example\n\n```\nThe async confirmation modal can be used like above. It consist of list of properties which are descriped below:\n\n|   Props                       |  Types                            | Required             | Default        | Description                               |\n|   --------------------------  |  -------------------------------  | --------------------:| -------------: | -----------------------------------------:|\n| confirmationBody              |  React.FC                         |                      |                | Main component that will be displayed inside modal|\n| title                         | string                            |                      |                | It is the title of the confirmation modal |\n| message                       | string                            |                      |                |  It is the message that is display inside the body of the modal  |\n| cancelLabel                   | string                            |                      |                | onCancel action tittle                    |\n| okayLabel                     | string                            |                      |                | onOkay action title                       |\n| isCloseable                   | boolean                           |                      | true           | It indicate wheather the modal can be closed or not. If true, you can only close the modal manualy from the component inside the modal using the modal close method |\n| className                     | string                            |                      |                | It is used to provde the styles for outer most element of the modal |\n| confirmationClassName         | string                            |                      |                | It is used to provde the styles for inner most content of the modal |\n| actions                       | IButtonProps[]   | any[]                 |                      |                 | You can define your own custiom actions list |\n| footer                       | React.ReactNode                 |                      |                 | You can pass custom footer to the modal |\n|  okyActionProps              | Record\u003cany,any\u003e                 |                      |                 | Adjust the styling of the okay or positive action button. |\n| cancelActionProps            | Record\u003cany,any\u003e                 |                      |                 | Adjust the styling of the cancel or negative action button |\n\n## Full customization with different UI framework\nThe react-global-modal support customization of the existing modal which means you can use this package with any UI framework that you are currently working within your project. For customization, you can pass customModal to the ``` GlobalModalWrapper ``` component. At first create the custom modal like bellow:\n\n```jsx\n//This is the example with chackra-ui\nimport {\n  Button,\n  Drawer,\n  DrawerBody,\n  DrawerCloseButton,\n  DrawerContent,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  Modal,\n  ModalBody,\n  ModalCloseButton,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalOverlay,\n} from '@chakra-ui/react'\nimport React from 'react'\nimport { IModalProps } from 'react-global-modal'\ntype IAntModalProps = IModalProps \u0026 {\n  width?: number\n  scrollBehavior?: 'inside' | 'outside'\n  isCentered?: boolean\n  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n}\nexport const CustomModalComponent = React.forwardRef((propsValues: IAntModalProps, ref) =\u003e {\n  const {\n    children,\n    open = false,\n    isCloseable,\n    title = 'Modal Header',\n    onModalClose = () =\u003e {},\n    footer,\n    closeIconComponent,\n    actions = [],\n    isSlidePane = false,\n    position,\n    hideHeader,\n    scrollBehavior = 'inside',\n    isCentered = false,\n    size = 'md',\n  } = propsValues\n\n  if (isSlidePane) {\n    return (\n      \u003cDrawer placement={position} isOpen={open} onClose={onModalClose} size={size}\u003e\n        \u003cDrawerOverlay /\u003e\n        \u003cDrawerContent\u003e\n          {!isCloseable \u0026\u0026 (!closeIconComponent ? \u003cDrawerCloseButton /\u003e : closeIconComponent)}\n          {!hideHeader \u0026\u0026 \u003cDrawerHeader\u003e{title}\u003c/DrawerHeader\u003e}\n          \u003cDrawerBody padding={0} position=\"relative\"\u003e\n            {children}\n          \u003c/DrawerBody\u003e\n          {footer \u0026\u0026 footer}\n          {actions.length \u003e 0 \u0026\u0026 !footer \u0026\u0026 (\n            \u003cDrawerFooter\u003e\n              {actions.map((el: any) =\u003e (\n                \u003cButton\n                  key={el.title}\n                  colorScheme={el.colorScheme}\n                  mr={3}\n                  onClick={el.onClick}\n                  variant={el.variant ?? 'ghost'}\n                \u003e\n                  {el.title}\n                \u003c/Button\u003e\n              ))}\n            \u003c/DrawerFooter\u003e\n          )}\n        \u003c/DrawerContent\u003e\n      \u003c/Drawer\u003e\n    )\n  }\n  return (\n    \u003cModal\n      isOpen={open}\n      onClose={onModalClose}\n      closeOnOverlayClick={!isCloseable}\n      scrollBehavior={scrollBehavior}\n      isCentered={isCentered}\n      size={size}\n    \u003e\n      \u003cModalOverlay /\u003e\n      \u003cModalContent\u003e\n        {!hideHeader \u0026\u0026 \u003cModalHeader\u003eModal Title\u003c/ModalHeader\u003e}\n        {!isCloseable \u0026\u0026 \u003cModalCloseButton /\u003e}\n        \u003cModalBody padding={0} position=\"relative\"\u003e\n          {children}\n        \u003c/ModalBody\u003e\n        {footer \u0026\u0026 footer}\n        {actions.length \u003e 0 \u0026\u0026 !footer \u0026\u0026 (\n          \u003cModalFooter\u003e\n            {actions.map((el: any) =\u003e (\n              \u003cButton\n                key={el.title}\n                colorScheme={el.colorScheme}\n                mr={3}\n                onClick={el.onClick}\n                variant={el.variant ?? 'ghost'}\n              \u003e\n                {el.title}\n              \u003c/Button\u003e\n            ))}\n          \u003c/ModalFooter\u003e\n        )}\n      \u003c/ModalContent\u003e\n    \u003c/Modal\u003e\n  )\n})\n```\nAfter creating the custom modal, pass the custom modal to ``` GlobalModalWrapper ``` component.\n\n```jsx\n \u003cGlobalModalWrapper customModal={CustomModalComponent} ref={(el) =\u003e (globalModalRef = el)} /\u003e\n```\n\nBelow are the some example with different UI framework using which you can replace the existing modal with your own custom modal\n##### 1. With TailwindCSS\nFor working with react-global-modal and tailwindCss, you can check the [Example](https://github.com/bigyanpoudel/react-global-modal/tree/main/playground/with-tailwindCSS)\n\n##### 2. With chakra-ui\nFor working with react-global-modal and chakra ui, you can check the [Example](https://github.com/bigyanpoudel/react-global-modal/tree/main/playground/with-chakra-ui)\n\n##### 3. With antd \nFor working with react-global-modal and ant design, you can check the [Example](https://github.com/bigyanpoudel/react-global-modal/tree/main/playground/with-antd)\n\n\n##### 4. With material-ui\nFor working with react-global-modal and material ui, you can check the [Example](https://github.com/bigyanpoudel/react-global-modal/tree/main/playground/with-material-ui)\n\n##### 5. simple example with package itself\nFor working with react-global-modal, you can check the [Example](https://github.com/bigyanpoudel/react-global-modal/tree/main/playground/react-global-modal-example)\n\n\n## Important Note for TypeScript Users\nIf you're using the Vite default template with TypeScript, you might encounter issues with type declarations not being found. This is because the default `tsconfig.json` file that comes with the template sets the `moduleResolution` option to `\"Bundler\"`.\n\nThe `moduleResolution` option controls how TypeScript resolves module imports. The `\"Bundler\"` option is designed to work with bundlers like Webpack or Rollup, which have their own custom module resolution logic.\n\nHowever, Vite doesn't use custom module resolution logic. Instead, it uses Node.js-style module resolution. This means that when you import a module, TypeScript will look for an `index.ts` (or `index.d.ts` for type declarations) file in the specified directory.\n\nTo fix the issue with type declarations not being found, you should change the `moduleResolution` option in your `tsconfig.json` file to `\"Node\"`. Here's how you can do this:\n\n```jsonc\n{\n  \"compilerOptions\": {\n    \"moduleResolution\": \"Node\",\n    ...\n  },\n  ...\n}\n```\n\nNote: In the case of customization, if you need more props you can pass  the prop while opening the modal and can access the same prop in your custom modal. You can also observe this in the example.\n# License\n\nMIT © [bigyanpoudel](https://github.com/bigyanpoudel)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigyanpoudel%2Freact-global-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigyanpoudel%2Freact-global-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigyanpoudel%2Freact-global-modal/lists"}