{"id":27652493,"url":"https://github.com/alex-cory/use-react-modal","last_synced_at":"2025-04-24T05:02:40.393Z","repository":{"id":35434694,"uuid":"217682636","full_name":"alex-cory/use-react-modal","owner":"alex-cory","description":"🖼 React hook for Modals","archived":false,"fork":false,"pushed_at":"2023-01-07T11:05:37.000Z","size":2681,"stargazers_count":80,"open_issues_count":22,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-23T21:43:45.229Z","etag":null,"topics":["hook","lightbox","modal","portal","react","react-modal","use-dialog","use-lightbox","use-modal","usedialog","usemodal"],"latest_commit_sha":null,"homepage":"","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/alex-cory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-26T08:58:14.000Z","updated_at":"2023-12-06T16:48:18.000Z","dependencies_parsed_at":"2023-01-15T21:15:49.444Z","dependency_job_id":null,"html_url":"https://github.com/alex-cory/use-react-modal","commit_stats":null,"previous_names":["iamthesiz/use-react-modal","alex-cory/use-react-modal"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex-cory%2Fuse-react-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex-cory%2Fuse-react-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex-cory%2Fuse-react-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex-cory%2Fuse-react-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alex-cory","download_url":"https://codeload.github.com/alex-cory/use-react-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250522293,"owners_count":21444509,"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":["hook","lightbox","modal","portal","react","react-modal","use-dialog","use-lightbox","use-modal","usedialog","usemodal"],"created_at":"2025-04-24T05:01:18.666Z","updated_at":"2025-04-24T05:02:40.382Z","avatar_url":"https://github.com/alex-cory.png","language":"TypeScript","readme":"\u003cp style=\"text-align: center;\" align=\"center\"\u003e\n    \u003ch1 align=\"center\"\u003euseModal\u003c/h1\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e🖼 React hook for Modals\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/alex-cory/use-react-modal/pulls\"\u003e\n      \u003cimg src=\"https://camo.githubusercontent.com/d4e0f63e9613ee474a7dfdc23c240b9795712c96/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5052732d77656c636f6d652d627269676874677265656e2e737667\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://lgtm.com/projects/g/alex-cory/react-useportal/context:javascript\"\u003e\n      \u003cimg alt=\"undefined\" src=\"https://img.shields.io/lgtm/grade/javascript/g/alex-cory/react-useportal.svg?logo=lgtm\u0026logoWidth=18\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/use-react-modal\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/dt/use-react-modal.svg\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://bundlephobia.com/result?p=use-react-modal\"\u003e\n      \u003cimg alt=\"undefined\" src=\"https://img.shields.io/bundlephobia/minzip/use-react-modal.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://greenkeeper.io/\"\u003e\n      \u003cimg src=\"https://badges.greenkeeper.io/alex-cory/use-react-modal.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://circleci.com/gh/alex-cory/use-react-modal\"\u003e\n      \u003cimg src=\"https://img.shields.io/circleci/project/github/alex-cory/use-react-modal/master.svg\" /\u003e\n    \u003ca href=\"https://codeclimate.com/github/alex-cory/use-react-modal/maintainability\"\u003e\n      \u003cimg src=\"https://api.codeclimate.com/v1/badges/609840b6dc914e035d15/maintainability\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/alex-cory/use-react-modal/blob/master/license.md\"\u003e\n      \u003cimg alt=\"undefined\" src=\"https://img.shields.io/github/license/alex-cory/use-react-modal.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://snyk.io/test/github/alex-cory/use-react-modal?targetFile=package.json\"\u003e\n      \u003cimg src=\"https://snyk.io/test/github/alex-cory/use-react-modal/badge.svg?targetFile=package.json\" alt=\"Known Vulnerabilities\" data-canonical-src=\"https://snyk.io/test/github/alex-cory/use-react-modal?targetFile=package.json\" style=\"max-width:100%;\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/use-react-modal\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/use-react-modal.svg\" alt=\"Known Vulnerabilities\" data-canonical-src=\"https://snyk.io/test/github/alex-cory/use-react-modal?targetFile=package.json\" style=\"max-width:100%;\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\nSimple, lightweight hook for Modals/Dialogs.\n\nThis hook is also isomorphic, meaning it works with SSR (server side rendering).\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/alex-cory/react-useportal\"\u003e\n    \u003cimg src=\"https://github.com/alex-cory/react-useportal/raw/master/usePortal.gif\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nFeatures\n--------\n- SSR (server side rendering) support\n- TypeScript support\n- 2 dependencies ([use-ssr](https://github.com/alex-cory/use-ssr), [react-useportal](https://github.com/alex-cory/react-useportal))\n- Built in state\n\n### Examples\n- [Example](https://codesandbox.io/s/usemodal-dj3du)\n\nInstallation\n------------\n\n```shell\nyarn add use-react-modal      or     npm i -S use-react-modal\n```\n\nUsage\n-----\n\n### Basic Usage\n\n```jsx \nimport useModal from 'use-react-modal'\n\nconst App = () =\u003e {\n  const { isOpen, openModal, closeModal, Modal } = useModal()\n\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={openModal}\u003eOpen Me!\u003c/button\u003e\n      {isOpen \u0026\u0026 (\n        \u003cModal\u003e\n          \u003cbutton onClick={closeModal}\u003eclose\u003c/button\u003e\n          Whatever you put here will be centered to the middle of the screen.\n        \u003c/Modal\u003e\n      )\n    \u003c/\u003e\n  )\n}\n```\n\n### With Provider\n```jsx \nimport useModal, { Provider } from 'use-react-modal'\n\nconst MyComponent = () =\u003e {\n  const { isOpen, openModal, Modal } = useModal()\n\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={openModal}\u003eOpen Me!\u003c/button\u003e\n      {isOpen \u0026\u0026 (\n        \u003cModal\u003e\n          Now, whatever you put here will be centered AND have a backdrop\n          with the color specified in the Provider\n        \u003c/Modal\u003e\n      )\n    \u003c/\u003e\n  )\n}\n\n\nconst App = () =\u003e (\n  \u003cProvider background='rgba(0, 0, 0, 0.5)'\u003e\n    \u003cMyComponent /\u003e\n  \u003c/Provider\u003e\n)\n```\n\n**Make sure you are passing the html synthetic event to the `openModal` and `toggleModal` . i.e. `onClick={e =\u003e openModal(e)}`**\n\n### Usage with a `ref`\nIf for some reason, you don't want to pass around the `event` to `openModal` or `toggleModal`, you can use a `targetRef` like this.\n```jsx\nimport useModal from 'use-react-modal'\n\nconst App = () =\u003e {\n  const { targetRef, openModal, closeModal, isOpen, Modal } = useModal()\n\n  return (\n    \u003c\u003e\n      {/* see below how I don't have to pass the event if I use the ref */}\n      \u003cbutton ref={targetRef} onClick={() =\u003e openModal()}\u003e\n        Open Modal\n      \u003c/button\u003e\n      {isOpen \u0026\u0026 (\n        \u003cModal\u003e\n          \u003cp\u003e\n            \u003cbutton onClick={closeModal}\u003eClose me!\u003c/button\u003e, hit ESC or\n            Cool Modal 😜\n          \u003c/p\u003e\n        \u003c/Modal\u003e\n      )}\n    \u003c/\u003e\n  )\n}\n```\n\nOptions\n-----\n| Option                | Description                                                                              |\n| --------------------- | ---------------------------------------------------------------------------------------- |\n| `background` | sets the color of the backdrop, if nothing is set, there will be no backdrop |\n| `closeOnOutsideClick` | This will close the modal when not clicking within the modal. Default is `true` |\n| `closeOnEsc`   | This will allow you to hit ESC and it will close the modal. Default is `true`    |\n| `bindTo` | This is the DOM node you want to attach the modal to. By default it attaches to `document.body` |\n| `isOpen` | This will be the default for the modal being open or closed. Default is `false` |\n| `onOpen` | This is used to call something when the modal is opened |\n| `onClose` | This is used to call something when the modal is closed |\n| html event handlers (i.e. `onClick`) | These can be used instead of `onOpen`. |\n\n### Option Usage\n\n```js\nconst {\n  openModal,\n  closeModal,\n  toggleModal,\n  isOpen,\n  Modal,\n  // if you don't pass an event to openModal, closeModal, or toggleModal, you will need to\n  // put this on the element you want to interact with/click to open the modal\n  targetRef,\n  // this allows you to interact directly with the backdrop/overlay\n  backdropRef,\n  // this allows you to interact directly with the modal\n  modalRef,\n} = useModal({\n  // sets the color of the backdrop, if nothing is set, the backdrop will be transparent unless it's set in the Provider\n  // setting to `null` removes any background set in the `Provider`\n  background: 'rgba(0, 0, 0, 0.5)',\n  closeOnOutsideClick: true,\n  closeOnEsc: true,\n  bindTo, // attach the portal to this node in the DOM\n  isOpen: false,\n  // `event` has all the fields that a normal `event` would have such as `event.target.value`, etc.\n  // with the additional `portal` and `targetEl` added to it as seen in the examples below\n  onOpen: (event) =\u003e {\n    // can access: event.portal, event.targetEl, event.event, event.target, etc.\n  },\n  // `onClose` will not have an `event` unless you pass an `event` to `closePortal`\n  onClose({ targetEl, event, portal }) {},\n  // `targetEl` is the element that you either are attaching a `ref` to\n  // or that you are putting `openPortal` or `togglePortal` or `closePortal` on\n\n  // in addition, any event handler such as onClick, onMouseOver, etc will be handled the same\n  onClick({ targetEl, event, portal }) {}\n})\n```\nCan also do array destructuring\n```js\nconst [openModal, closeModal, isOpen, Modal, toggleModal, targetRef, portalRef, modalRef] = useModal()\n```\n\nTodos\n------\n- [ ] animations 😜\n- [ ] React Native support. [1](https://github.com/zenyr/react-native-portal) [2](https://github.com/cloudflare/react-gateway) [3](https://medium.com/@naorzruk/portals-in-react-native-22797ba8aa1b) [4](https://stackoverflow.com/questions/46505378/can-we-have-react-16-portal-functionality-react-native) [5](https://github.com/callstack/react-native-paper/blob/master/src/components/Portal/PortalManager.tsx) Probably going to have to add a `Provider`...\n- [ ] add correct return types\n- [ ] tests (priority)\n- [ ] potential syntax ideas\n  ```\n  // then you can change the order of the array destructuring syntax\n  \u003cProvider order={['Modal', 'openModal']} /\u003e\n  \n  // CustomModal, CustomCloseButton\n  \u003cProvider Modal={CustomModal} CloseButton={CustomClostButton} /\u003e\n  const { Modal, CloseButton } = useProvider()\n  \n  // customize the modal animations\n  const { Modal } = useModal({\n    onOpen({ modal }) {\n      modal.current.style.cssText = `\n        /* do some animation in */\n      `\n    },\n    onClose({ modal }) {\n      modal.current.style.cssText = `\n        /* do some animation out */\n      `\n    }\n  })\n  \n  // customize the modal animations idea 2\n  const { Modal } = useModal({\n    animateIn: `\n      /* css for animating in */\n    `,\n    animateOut: `\n      /* css for animating out */\n    `,\n  })\n  \n  // customize the modal animations idea 3\n  // maybe have some predefined options?\n  const { Modal } = useModal({\n    animate: 'fade-in-out', // 'slide-in-top', etc...\n  })\n  \n  // check out http://reactcommunity.org/react-modal/styles/transitions.html\n  ```\n","funding_links":[],"categories":["Packages"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex-cory%2Fuse-react-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falex-cory%2Fuse-react-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex-cory%2Fuse-react-modal/lists"}