React-partial-modal NPM

react-partial-modal

package version Provider a simple react modal component created via react partials

Setup

npm

 npm install --save react-partial-modal

and import it

import useModal from 'react-partial-modal'

Usage

import React from 'react'
import useModal from 'react-partial-modal'
const Example = () => {
    const [ModalWrapper,open,close,isOpen] = useModal('root')
    return (
        <div>
            <button onClick={open}>open Modal</button>
            <ModalWrapper>
                <div>
                    modal content
                </div>
            </ModalWrapper>
            <button onClick={close}>close Modal</button>
        </div>
    )
}

export default Example

API

const [ModalWrapper,open,close,isOpen]=useModal(element id,options)

name	description
ModalWrapper	A react modal that wraps the whole content of your modal
open	function that opens modal(your modal is not open until you call this function
close	function that closes the modal
isOpen	a boolean that is true if modal is open or false when modal is closed
options	it's an object that has "preventScroll" key set it to true if you want to prevent scrolling when modal is open
element id	the element id that you want to create your partial in