useModal

A super light and easy-to-use react custom hook to implement modals using Portals.   

See Demo  

Basic Usage

Install:

$ npm i hooks-modal

Use:

import useModal from 'hooks-modal'

function App() {
    const [Modal, toggleModal] = useModal()

    return (
        <div>
            <button onClick={toggleModal}>Open Modal</button>
            <Modal>
                This is modal content, you can put anything here

                You can also put a button to close the modal

                <button onClick={toggleModal}>Close Modal</button>
            </Modal>
        </div>
    )
}

Multiple Modals

You can have as many modals as you want.

const [ModalA, toggleModalA] = useModal()
const [ModalB, toggleModalB] = useModal()

return (
    <div>
        // Openers
        <button onClick={toggleModalA}>Open Modal A</button>
        <button onClick={toggleModalB}>Open Modal B</button>

        // Modal A
        <ModalA>
            <button onClick={toggleModalA}>Close Modal A</button>
        </ModalA>

        // Modal B
        <ModalB>
            <button onClick={toggleModalB}>Close Modal B</button>
        </ModalB>
    </div>
)

Support Context

Modal is not blocking its children from receiving any context (Other implementations I've seen could loose the context):

import { AppContext } from './AppContext'
import ModalContent from './ModalContent'

function App() {
    const [Modal, toggleModal] = useModal()

    return (
        <AppContext.Provider>
            <button onClick={toggleModal}>Open Modal</button>

            <Modal>
                <ModalContent />
            </Modal>
        </AppContext.Provider>
    )
}

Then in ModalContent component you can use context:

import { useContext } from 'react'
import { AppContext } from './AppContext'

function ModalContent () {
    const { language } = useContext(AppContext)

    return (
        // Render something using context...
    )
}

Props

Modal inherits any props from HTMLDivElement, on top of that, it also provides several very useful props, these are all optional: | Name | Type | Description | Default | | -------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | | mask | boolean | When this is set to true, modal will fill the entire screen by setting both bottom and right css properties to 0, and this will block the user interacting with the elements that is behind the modal. | true | | maskClosable | boolean | When this is set to true, user can close the modal by clicking the modal background (All of the empty space that is not its children). | true | | blockScroll | boolean | When this is set to true, HTML body cannot be scrolled when modal is opened, NOTE: scroll bar for the body can still be seen, so the page layout will not twitch on Windows devices | false | | className | string | Every modal element has this className by default, it's useful if you want to simply adjust the style globally. Still, you can pass a className to overwrite the default value. | useModal_wrapper | | rootId | string | The id of the HTML element that Portal will render the modal into. | modal-root | | onShow | ()=>void | Do something when the modal is opened. | undefined | | onHide | ()=>void | Do something when the modal is closed. | undefined |

Set Prop Values Globally

If you want to use certain prop values globally in your project, you can wrap this hook with your own custom hook, and set the values there:

import React, { FC, ComponentProps } from "react"
import useModal from "hooks-modal"

export default function usePopover() {
    const [Modal, togglePopover] = useModal()

    type PopoverProps = ComponentProps<typeof Modal>

    const Popover: FC<PopoverProps> = ({
        children,
        mask,
        blockScroll,
        ...rest 
    }) => (
        <Modal
            // Showing popover will not prevent user
            // interaction with background element
            mask={false}
            // User can still scroll the body element
            blockScroll={false}
            // Hide the popover when it loses focus
            onBlur={togglePopover}
            {...rest}
        >
            {children}
        </Modal>
    )

    return [Popover, togglePopover] as [FC<PopoverProps>, () => void]
}

Enjoy ;)