https://github.com/leandrosimoes/react-native-ls-modals-controller
React Native library to control multiple modals as a queue or a stack.
https://github.com/leandrosimoes/react-native-ls-modals-controller
modals multiple queue react-native stack
Last synced: over 1 year ago
JSON representation
React Native library to control multiple modals as a queue or a stack.
- Host: GitHub
- URL: https://github.com/leandrosimoes/react-native-ls-modals-controller
- Owner: leandrosimoes
- Created: 2021-11-03T21:05:39.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-06-26T21:30:22.000Z (about 4 years ago)
- Last Synced: 2024-08-11T08:48:49.209Z (almost 2 years ago)
- Topics: modals, multiple, queue, react-native, stack
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-ls-modals-controller
- Size: 854 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-ls-modals-controller
[](https://www.codacy.com/gh/leandrosimoes/react-native-ls-modals-controller/dashboard?utm_source=github.com&utm_medium=referral&utm_content=leandrosimoes/react-native-ls-modals-controller&utm_campaign=Badge_Grade)
[](https://badge.fury.io/js/react-native-ls-modals-controller)
A React Native library to control multiple modals as a queue or a stack and avois some errors, specially on iOS
## Install
`npm i react-native-ls-modals-controller`
or
`yarn add react-native-ls-modals-controller`
## Usage
1) Wrap your app content with the `ModalQueueProvider` or `ModalStackProvider`
```jsx
import { ModalQueueProvider, ModalStackProvider } from 'react-native-ls-modals-controller'
export default App = () => {
return (
...
)
}
```
* 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.
2) Create a `ModalQueue` or a `ModalStack` and add some `ModalQueueItem` or `ModalStackItem` childs as you want
```jsx
const defaultModalProps = { animationType: 'slide' }
...
...
```
3) Use the `useModalQueue` or `useModalStack` hooks to have access for state and methods
```jsx
const { state, currentId, enqueue, dequeue, clear } = useModalQueue()
...
const { state, currentId, add, remove, clear } = useModalStack()
...
```
## Types
```typescript
type ModalControllerState = {
queue: Array
}
type ModalControllerContextProps = {
state: ModalControllerState
setState: React.Dispatch>
}
type ModalQueueItemProps = ModalProps & {
id: number | string
component: React.ReactNode
timeoutThreshold?: number
}
type ModalStackItemProps = ModalProps & {
id: number | string
component: React.ReactNode
timeoutThreshold?: number
}
type ModalQueueProps = {
timeoutThreshold?: number
children:
| React.ReactElement[]
| React.ReactElement
}
type ModalStackProps = {
timeoutThreshold?: number
children:
| React.ReactElement[]
| React.ReactElement
}
```