Nondeterministic Palindrome Machine

    react-native-ls-modals-controller
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.4 • Public • Published

    react-native-ls-modals-controller

    Codacy Badge npm version Node.js Package

    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
    import { ModalQueueProvider, ModalStackProvider } from 'react-native-ls-modals-controller'
    
    export default App = () => {
        return (
            <ModalQueueProvider>
                <ModalStackProvider>
                    ...
                </ModalStackProvider>
            </ModalQueueProvider>
        )
    }
    • 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.
    1. Create a ModalQueue or a ModalStack and add some ModalQueueItem or ModalStackItem childs as you want
    const defaultModalProps = { animationType: 'slide' }
    
    <ModalQueue>
        <ModalQueueItem id={1} component={...} {...defaultModalProps} />
        <ModalQueueItem id={2} component={...} {...defaultModalProps} />
        <ModalQueueItem id={3} component={...} {...defaultModalProps} />
        ...
    </ModalQueue>
    
    <ModalStack>
        <ModalStackItem id={1} component={...} {...defaultModalProps} />
        <ModalStackItem id={2} component={...} {...defaultModalProps} />
        <ModalStackItem id={3} component={...} {...defaultModalProps} />
        ...
    </ModalStack>
    1. Use the useModalQueue or useModalStack hooks to have access for state and methods
        const { state, currentId, enqueue, dequeue, clear } = useModalQueue()
        ...
        
        const { state, currentId, add, remove, clear } = useModalStack()
        ...

    Types

    type ModalControllerState = {
        queue: Array<number | string>
    }
    
    type ModalControllerContextProps = {
        state: ModalControllerState
        setState: React.Dispatch<React.SetStateAction<ModalControllerState>>
    }
    
    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<ModalQueueItemProps>[]
            | React.ReactElement<ModalQueueItemProps>
    }
    
    type ModalStackProps = {
        timeoutThreshold?: number
        children:
            | React.ReactElement<ModalStackItemProps>[]
            | React.ReactElement<ModalStackItemProps>
    }

    Install

    npm i react-native-ls-modals-controller

    DownloadsWeekly Downloads

    8

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    17.5 kB

    Total Files

    35

    Last publish

    Collaborators

    • leandrosimoes