{"id":22338368,"url":"https://github.com/alekseymakhankov/hyper-modal","last_synced_at":"2025-07-29T22:33:39.176Z","repository":{"id":34051871,"uuid":"167805324","full_name":"alekseymakhankov/hyper-modal","owner":"alekseymakhankov","description":"Fully customizable and accessible react modal component","archived":false,"fork":false,"pushed_at":"2023-02-04T10:04:50.000Z","size":3027,"stargazers_count":19,"open_issues_count":8,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-25T05:30:40.388Z","etag":null,"topics":["accessible-modal","accessible-react","dialog","modal","react","react-component","react-dialog","react-modal-component","reactjs","rollup","typescript"],"latest_commit_sha":null,"homepage":null,"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/alekseymakhankov.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":"2019-01-27T12:18:10.000Z","updated_at":"2023-08-26T13:59:05.000Z","dependencies_parsed_at":"2024-06-18T20:13:03.877Z","dependency_job_id":"3c3627de-87fd-4b39-88db-ca8077bf08df","html_url":"https://github.com/alekseymakhankov/hyper-modal","commit_stats":{"total_commits":55,"total_committers":5,"mean_commits":11.0,"dds":"0.19999999999999996","last_synced_commit":"143b3b1f009b7082fc786044ffab32ec1df77828"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alekseymakhankov%2Fhyper-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alekseymakhankov%2Fhyper-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alekseymakhankov%2Fhyper-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alekseymakhankov%2Fhyper-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alekseymakhankov","download_url":"https://codeload.github.com/alekseymakhankov/hyper-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228054426,"owners_count":17862129,"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":["accessible-modal","accessible-react","dialog","modal","react","react-component","react-dialog","react-modal-component","reactjs","rollup","typescript"],"created_at":"2024-12-04T06:14:01.200Z","updated_at":"2024-12-04T06:14:01.855Z","avatar_url":"https://github.com/alekseymakhankov.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React hyper modal\n#### Fully customizable and accessible modal react component\n\nWelcome to the react hyper modal repository 😄\nI want to introduce you to an awesome react component for displaying modal windows\n\n![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)\n[![Coverage Status](https://coveralls.io/repos/github/alekseymakhankov/hyper-modal/badge.svg?branch=master\u0026service=github)](https://coveralls.io/github/alekseymakhankov/hyper-modal?branch=master\u0026service=github)\n[![Build Status](https://travis-ci.org/alekseymakhankov/hyper-modal.svg?branch=master)](https://travis-ci.org/alekseymakhankov/hyper-modal)\n![min](https://img.shields.io/bundlephobia/min/react-hyper-modal.svg)\n![minzip](https://img.shields.io/bundlephobia/minzip/react-hyper-modal.svg)\n\n## [Live demo](https://alekseymakhankov.github.io/packages/?package=hyper-modal)\n\n### Check also the new stackable content feature!\n\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Properties](#properties)\n  - [Default properties](#default-properties)\n  - [Types](#types)\n- [Contributing](#contributing)\n- [License](#license)\n\n## \u003ca id=\"installation\"\u003e\u003c/a\u003eInstallation\n\n###### You can use [![npm](https://api.iconify.design/logos:npm.svg?height=14)](https://www.npmjs.com/get-npm) or [![yarn](https://api.iconify.design/logos:yarn.svg?height=14)](https://yarnpkg.com/lang/en/docs/install) package managers\n\n```console\n$ npm i --save react-hyper-modal\n```\n__or__\n```console\n$ yarn add react-hyper-modal\n```\n\n## \u003ca id=\"usage\"\u003e\u003c/a\u003eUsage\n\n#### Controlled modal component\n\n```javascript\nimport React from 'react';\nimport HyperModal from 'react-hyper-modal';\n\n...\n\nclass MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isModalOpen: false,\n    };\n  }\n\n  ...\n\n  openModal =\u003e this.setState({ isModalOpen: true });\n  closeModal =\u003e this.setState({ isModalOpen: false });\n\n  ...\n\n  render() {\n    const { isModalOpen } = this.state;\n    return (\n      \u003cHyperModal\n        isOpen={isModalOpen}\n        requestClose={this.closeModal}\n      \u003e\n        Your awesome modal content\n      \u003c/HyperModal\u003e\n    );\n  }\n}\n```\n\n#### Uncontrolled modal component\n\n```javascript\nimport React from 'react';\nimport HyperModal from 'react-hyper-modal';\n\n...\n\nconst MyComponent = () =\u003e {\n  return (\n    \u003cHyperModal\n      renderOpenButton={(requestOpen) =\u003e {\n        return (\n          \u003cbutton onClick={requestOpen}\u003eOpen uncontrolled modal\u003c/button\u003e\n        );\n      }\n    /\u003e\n  );\n}\n```\n\n\n#### Stackable content example\n\nTo use stackable content you should use `ModalStack` component and children as function. Every child of `ModalStack` will represent a different layout.\n\n```javascript\nimport React from 'react';\nimport HyperModal, { ModalStack, ModalStackProps } from 'react-hyper-modal';\n\n...\n\nconst Component = () =\u003e {\n  const [index, setIndex] = React.useState(0)\n  return (\n    \u003cHyperModal\n      stackable\n      stackableIndex={index}\n      renderOpenButton={requestOpen =\u003e (\n        \u003cbutton type=\"button\" className={styles.button} onClick={requestOpen}\u003eOpen stackable modal\u003c/button\u003e\n      )}\n    \u003e\n      {(props: ModalStackProps) =\u003e (\n        \u003cModalStack {...props}\u003e // !!! It's very important to provide props to ModalStack\n          \u003cdiv style={{ color: 'red' }}\u003e\n            \u003cdiv\u003e1\u003c/div\u003e\n            \u003cbutton onClick={() =\u003e setIndex(1)}\u003eopen nested\u003c/button\u003e\n            \u003cbutton onClick={() =\u003e props.handleClose()}\u003eclose\u003c/button\u003e\n          \u003c/div\u003e\n          \u003cdiv\u003e\n            \u003cdiv\u003e2\u003c/div\u003e\n            \u003cbutton onClick={() =\u003e setIndex(2)}\u003eopen nested\u003c/button\u003e\n            \u003cbutton onClick={() =\u003e setIndex(0)}\u003eclose nested\u003c/button\u003e\n            \u003cbutton\u003eclose\u003c/button\u003e\n          \u003c/div\u003e\n          \u003cdiv\u003e\n            \u003cdiv\u003e3\u003c/div\u003e\n            \u003cbutton onClick={() =\u003e setIndex(1)}\u003eclose nested\u003c/button\u003e\n            \u003cbutton onClick={() =\u003e props.handleClose()}\u003eclose\u003c/button\u003e\n          \u003c/div\u003e\n        \u003c/ModalStack\u003e\n      )}\n    \u003c/HyperModal\u003e\n  )\n}\n```\n\n### That's it! 🍰✨\n\n## \u003ca id=\"properties\"\u003e\u003c/a\u003eProperties\nYou can find props types and default props below the table.\n\n##### **\\*** - required for controlled modal component\n\nProps | Description\n------------ | -------------\nafterClose | callback that is called after closing\nariaEnabled | enable [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) properties\nariaProps | custom [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) properties\nbeforeClose | callback that is called before closing\nchildrenMode | describing if the modal content should be rendered as [React Children](https://reactjs.org/docs/react-api.html#reactchildren)\nclasses | overriding default modal class names\ncloseDebounceTimeout | time to close modal\ncloseIconPosition | position of close button\ncloseOnCloseIconClick | close the modal by pressing close button\ncloseOnDimmerClick | close the modal by pressing on dimmer\ncloseOnEscClick | close the modal by pressing ESC\ndimmerEnabled | describing if the dimmer should be shown or not\nisFullscreen | describing if the modal should be shown in full screen or not\nisOpen **\\*** | describing if the modal should be shown or not\nmodalContentRef | [reference](https://reactjs.org/docs/refs-and-the-dom.html) to the modal content `div`\nmodalWrapperRef | [reference](https://reactjs.org/docs/refs-and-the-dom.html) to the modal wrapper `div`\nportalMode | describing if the modal should be rendered in [React Portal](https://reactjs.org/docs/portals.html) or not\nportalNode | HTML node to create [React Portal](https://reactjs.org/docs/portals.html)\nposition | setting the modal position\nrenderCloseIcon | callback for rendering custom close button\nrenderContent | callback for rendering custom modal content\nrenderOpenButton | callback or boolean describing if the modal should be uncontrolled component\nrequestClose **\\*** | callback to close the modal\nstackable | make content stackable\nstackableIndex | stack length\nstackContentSettings | stackable content settings\nunmountOnClose | describing if the modal should be unmounted when close\n\n### \u003ca id=\"default-properties\"\u003e\u003c/a\u003eDefault properties\n```javascript\n{\n  ariaEnabled: true,\n  ariaProps: {\n    'aria-describedby': 'hyper-modal-description',\n    'aria-labelledby': 'hyper-modal-title',\n    role: 'dialog',\n  },\n  disableScroll: true,\n  childrenMode: true,\n  closeDebounceTimeout: 0,\n  closeIconPosition: {\n    vertical: 'top' as const,\n    horizontal: 'right' as const,\n  },\n  closeOnCloseIconClick: true,\n  closeOnDimmerClick: true,\n  closeOnEscClick: true,\n  dimmerEnabled: true,\n  isFullscreen: false,\n  portalMode: false,\n  position: {\n    alignItems: 'center' as const,\n    justifyContent: 'center' as const,\n  },\n  stackable: false,\n  stackableIndex: 0,\n  stackContentSettings: {\n    widthRatio: 4,\n    topOffsetRatio: 2,\n    transition: 'all 0.3s ease',\n    opacityRatio: 0.2,\n  }\n}\n```\n\n### \u003ca id=\"types\"\u003e\u003c/a\u003eTypes\n```typescript\ntype TModalPosition = 'flex-start' | 'center' | 'flex-end';\ntype THorizontalPosition = 'left' | 'center' | 'right';\ntype TVerticalPosition = 'top' | 'middle' | 'bottom';\n\ninterface IClassNamesProps {\n  closeIconClassName?: string;\n  contentClassName?: string;\n  dimmerClassName?: string;\n  portalWrapperClassName?: string;\n  wrapperClassName?: string;\n}\n\ninterface IARIAProps {\n  'aria-describedby'?: string;\n  'aria-labelledby'?: string;\n  role?: string;\n}\n\ninterface IPositionProps {\n  alignItems?: TModalPosition;\n  justifyContent?: TModalPosition;\n}\n\ninterface ICloseIconPosition {\n  horizontal?: THorizontalPosition;\n  vertical?: TVerticalPosition;\n}\n\ninterface IModalProps {\n  afterClose?: () =\u003e void;\n  ariaEnabled?: boolean;\n  ariaProps?: IARIAProps;\n  beforeClose?: () =\u003e void;\n  childrenMode?: boolean;\n  classes?: IClassNamesProps;\n  closeDebounceTimeout?: number;\n  closeIconPosition?: ICloseIconPosition;\n  closeOnCloseIconClick?: boolean;\n  closeOnDimmerClick?: boolean;\n  closeOnEscClick?: boolean;\n  dimmerEnabled?: boolean;\n  isFullscreen?: boolean;\n  isOpen: boolean;\n  modalContentRef?: React.RefObject\u003cHTMLDivElement\u003e;\n  modalWrapperRef?: React.RefObject\u003cHTMLDivElement\u003e;\n  portalMode?: boolean;\n  portalNode?: HTMLElement;\n  position?: IPositionProps;\n  renderCloseIcon?: () =\u003e JSX.Element | null | string;\n  renderContent?: () =\u003e JSX.Element | JSX.Element[] | null | string;\n  renderOpenButton?: boolean | ((requestOpen: () =\u003e void) =\u003e JSX.Element | string);\n  requestClose: () =\u003e void;\n  unmountOnClose?: boolean;\n}\n```\n\n## \u003ca id=\"contributing\"\u003e\u003c/a\u003eContributing\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\nPlease make sure to update tests as appropriate.\n\n## \u003ca id=\"license\"\u003e\u003c/a\u003eLicense\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falekseymakhankov%2Fhyper-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falekseymakhankov%2Fhyper-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falekseymakhankov%2Fhyper-modal/lists"}