{"id":23204680,"url":"https://github.com/amodin/react-chained-modals","last_synced_at":"2025-10-15T13:50:08.938Z","repository":{"id":143904915,"uuid":"160947998","full_name":"AModin/react-chained-modals","owner":"AModin","description":"React component for display few chained modals / Single modal / Prompts / Alerts / Dialogs etc.","archived":false,"fork":false,"pushed_at":"2018-12-09T18:10:09.000Z","size":56,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-08T09:28:41.009Z","etag":null,"topics":["alerts","animation","chained","chained-modals","classname","dialogs","javascript","modals","popup","popup-window","prompts","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AModin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2018-12-08T14:39:35.000Z","updated_at":"2020-03-18T14:27:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"95085f16-6ced-4dd8-b8be-ab00fc1fb82a","html_url":"https://github.com/AModin/react-chained-modals","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AModin/react-chained-modals","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AModin%2Freact-chained-modals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AModin%2Freact-chained-modals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AModin%2Freact-chained-modals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AModin%2Freact-chained-modals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AModin","download_url":"https://codeload.github.com/AModin/react-chained-modals/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AModin%2Freact-chained-modals/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279084292,"owners_count":26099814,"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","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["alerts","animation","chained","chained-modals","classname","dialogs","javascript","modals","popup","popup-window","prompts","react"],"created_at":"2024-12-18T16:19:43.832Z","updated_at":"2025-10-15T13:50:08.919Z","avatar_url":"https://github.com/AModin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React chained modals [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=React%20chained%20modals%20\u0026url=https://github.com/AModin/react-chained-modals\u0026hashtags=react,modal,animate.css,portals)\n![React version](https://img.shields.io/badge/react-v16.2.0-%2361dafb.svg)\n\nAllow you to add few chained modals or just single popup in your react app. Easy to use and customizing. [Check the demo page](https://amodin.github.io/react-chained-modals-demo/)\n\n![screencast-amodin github io-2018 12 09-21-00-37](https://user-images.githubusercontent.com/15379788/49700916-308eed80-fbf6-11e8-8139-5465910de808.gif)\n\n## Getting Started\n### Installation\n\nGet the package from npm\n\n```\nnpm i react-chained-modals\n```\n### Usage\nImport:\n\n```javascript\nimport ChainedModal from \"react-chained-modals\";\nimport \"react-chained-modals/src/modal.css\"\nimport \"animate.css\"\n```\n\nthen place:\n\n```html\n\u003cChainedModal\n  animationNext=\"fadeInRight\"\n  animationPrev=\"fadeInLeft\"\n  visible={this.state.showModal}\n  onRequestClose={this.toggleModal}\n  closeOnBackground\n  animationSpeed=\"faster\"\n  elements={[\n   {\n     component: Modal1,\n     props: { title: \"First modal\" }\n   },\n   {\n     component: Modal2,\n     props: { title: \"Second modal\" }\n   },\n   {\n     component: Modal3,\n     props: { title: \"Third modal\" }\n   }\n ]}\n/\u003e\n```\n### Methods and options\n\n| Name          | Type          | Description  | Default|\n| ------------- |:-------------:| ----------| ------- |\n| animationNext | string        | Transition animation on `showNext` method call. View full list here [Animate.css](https://daneden.github.io/animate.css/ ). This method will call also on popup first view.| none\n| animationPrev | string        | Transition animation on `showPrev` method call. View full list here [Animate.css](https://daneden.github.io/animate.css/ )| none\n| visible       | bool          | Is modals visible. Options: true, false | false\n| onRequestClose | function     | Method that should set `visible` to false \n| closeOnBackground | bool | Should popup close on click at background. Options: true, false | false\n| animationSpeed | string | Define it if you want to change the animation speed. Options: \"slow\", \"slower\", \"fast\", \"faster\" | none |\n| elements | array | Each item in the array should have the `component` that will show and optional parameter `props` which put all 'props' you want to use in this component | none\n\n### Methods and options for each modal\n\nIn each component, that you added in `elements` you can get next next properties and methods from props:\n\n| Name              | Type          | Description |\n| -------------     |:-------------:| --------- |\n| closeChainedModal | function      | The `onRequestClose` function will be called\n| totalModals       | number        | Number of modals, length of array\n| showNext          | function      | Show next modal function\n| showPrev          | function      | Show prev modal function\n| currentModal      | number        | Current modal, index in array\n\n### Example of Modal1 component:\n\n```html\nconst Modal1 = props =\u003e {\n  return (\n    \u003cdiv\u003e\n      {props.title} {props.currentModal}\n      \u003cdiv\u003e{props.totalModals}\u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cspan onClick={props.showPrev()}\u003eGo prev \u003c/span\u003e\n        \u003cspan onClick={props.showNext()}\u003eGo next\u003c/span\u003e\n      \u003c/div\u003e\n      \u003cbutton onClick={() =\u003e props.closeChainedModal()}\u003eclose modal\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### Customizing:\n\nJust replace your styles with styles from the module\n\n## Built With\n\n* [Animate.css](https://daneden.github.io/animate.css/ ) - Animations for transition between modals\n* [React portals](https://reactjs.org/docs/portals.html) - Used for display modal\n* [Classnames](https://github.com/JedWatson/classnames) - For combining few classNames\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famodin%2Freact-chained-modals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famodin%2Freact-chained-modals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famodin%2Freact-chained-modals/lists"}