{"id":27372907,"url":"https://github.com/leandrosimoes/react-native-ls-modals-controller","last_synced_at":"2025-04-13T10:40:57.643Z","repository":{"id":40501530,"uuid":"424380439","full_name":"leandrosimoes/react-native-ls-modals-controller","owner":"leandrosimoes","description":"React Native library to control multiple modals as a queue or a stack.","archived":false,"fork":false,"pushed_at":"2022-06-26T21:30:22.000Z","size":874,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-11T08:48:49.209Z","etag":null,"topics":["modals","multiple","queue","react-native","stack"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-ls-modals-controller","language":"TypeScript","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/leandrosimoes.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"leandrosimoes","custom":["https://www.buymeacoffee.com/leandrosimoes","lesimoes.dev"]}},"created_at":"2021-11-03T21:05:39.000Z","updated_at":"2023-03-30T14:31:11.000Z","dependencies_parsed_at":"2022-09-09T10:50:17.094Z","dependency_job_id":null,"html_url":"https://github.com/leandrosimoes/react-native-ls-modals-controller","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandrosimoes%2Freact-native-ls-modals-controller","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandrosimoes%2Freact-native-ls-modals-controller/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandrosimoes%2Freact-native-ls-modals-controller/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandrosimoes%2Freact-native-ls-modals-controller/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leandrosimoes","download_url":"https://codeload.github.com/leandrosimoes/react-native-ls-modals-controller/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248701078,"owners_count":21147972,"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":["modals","multiple","queue","react-native","stack"],"created_at":"2025-04-13T10:40:56.805Z","updated_at":"2025-04-13T10:40:57.636Z","avatar_url":"https://github.com/leandrosimoes.png","language":"TypeScript","funding_links":["https://github.com/sponsors/leandrosimoes","https://www.buymeacoffee.com/leandrosimoes","lesimoes.dev"],"categories":[],"sub_categories":[],"readme":"# react-native-ls-modals-controller\n\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/b3d75dc0717a476198c95eea568847d4)](https://www.codacy.com/gh/leandrosimoes/react-native-ls-modals-controller/dashboard?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=leandrosimoes/react-native-ls-modals-controller\u0026amp;utm_campaign=Badge_Grade)\n[![npm version](https://badge.fury.io/js/react-native-ls-modals-controller.svg)](https://badge.fury.io/js/react-native-ls-modals-controller)\n![Node.js Package](https://github.com/leandrosimoes/react-native-ls-modals-controller/workflows/Node%2Ejs%20Package/badge.svg)\n\nA React Native library to control multiple modals as a queue or a stack and avois some errors, specially on iOS\n\n## Install\n\n`npm i react-native-ls-modals-controller` \n\nor \n\n`yarn add react-native-ls-modals-controller`\n\n## Usage\n\n1) Wrap your app content with the `ModalQueueProvider` or `ModalStackProvider`\n\n```jsx\nimport { ModalQueueProvider, ModalStackProvider } from 'react-native-ls-modals-controller'\n\nexport default App = () =\u003e {\n    return (\n        \u003cModalQueueProvider\u003e\n            \u003cModalStackProvider\u003e\n                ...\n            \u003c/ModalStackProvider\u003e\n        \u003c/ModalQueueProvider\u003e\n    )\n}\n```\n\n* PS: We strongly recomend using just one controller, `ModalQueueProvider` or `ModalStackProvider`. Since the state of both are not shared between each other, just use in case you really know how you'll control between the modals in each provider. We are planing to create a better way to manage that in the future.\n\n2) Create a `ModalQueue` or a `ModalStack` and add some `ModalQueueItem` or `ModalStackItem` childs as you want\n\n```jsx\nconst defaultModalProps = { animationType: 'slide' }\n\n\u003cModalQueue\u003e\n    \u003cModalQueueItem id={1} component={...} {...defaultModalProps} /\u003e\n    \u003cModalQueueItem id={2} component={...} {...defaultModalProps} /\u003e\n    \u003cModalQueueItem id={3} component={...} {...defaultModalProps} /\u003e\n    ...\n\u003c/ModalQueue\u003e\n\n\u003cModalStack\u003e\n    \u003cModalStackItem id={1} component={...} {...defaultModalProps} /\u003e\n    \u003cModalStackItem id={2} component={...} {...defaultModalProps} /\u003e\n    \u003cModalStackItem id={3} component={...} {...defaultModalProps} /\u003e\n    ...\n\u003c/ModalStack\u003e\n```\n\n3) Use the `useModalQueue` or `useModalStack` hooks to have access for state and methods\n\n```jsx\n    const { state, currentId, enqueue, dequeue, clear } = useModalQueue()\n    ...\n    \n    const { state, currentId, add, remove, clear } = useModalStack()\n    ...\n```\n\n## Types\n\n```typescript\ntype ModalControllerState = {\n    queue: Array\u003cnumber | string\u003e\n}\n\ntype ModalControllerContextProps = {\n    state: ModalControllerState\n    setState: React.Dispatch\u003cReact.SetStateAction\u003cModalControllerState\u003e\u003e\n}\n\ntype ModalQueueItemProps = ModalProps \u0026 {\n    id: number | string\n    component: React.ReactNode\n    timeoutThreshold?: number\n}\n\ntype ModalStackItemProps = ModalProps \u0026 {\n    id: number | string\n    component: React.ReactNode\n    timeoutThreshold?: number\n}\n\ntype ModalQueueProps = {\n    timeoutThreshold?: number\n    children:\n        | React.ReactElement\u003cModalQueueItemProps\u003e[]\n        | React.ReactElement\u003cModalQueueItemProps\u003e\n}\n\ntype ModalStackProps = {\n    timeoutThreshold?: number\n    children:\n        | React.ReactElement\u003cModalStackItemProps\u003e[]\n        | React.ReactElement\u003cModalStackItemProps\u003e\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleandrosimoes%2Freact-native-ls-modals-controller","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleandrosimoes%2Freact-native-ls-modals-controller","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleandrosimoes%2Freact-native-ls-modals-controller/lists"}