awesome-modal_by_corentin

Awesomodal - Simple react.js modal

About

Simple react modal to use for your next project, with fully custom styling options. Build with: react, styledComponent, PropTypes, StoryBook. Publish on npm using Rollup

Getting Started

install with npm :

npm install --save awsomodal

or, with yarn :

yarn add awsomodal

How to use the lib

1. First, Import the Modal

import Modal from "awsomodal/dist/modal"

2. Then, declare your state and close function logic

const [ isOpen, setIsOpen ] = useState(false);

const closeModal = () => {
        setIsOpen(false);
    };

3. Add content in the modal

<Modal state={modal} config={{}} close={closeModal}>
    {/* content */}
</Modal>

4. For the style, use the style prop. You can pass an object with content and/or backdrop example:

const style = {
    content: {
        {/* STYLE HERE FOR THE MODAL BOX */}
    },
    backdrop: {
         {/* STYLE HERE FOR THE BACKDROP */}
    }
}

Props

• isOpen: Boolean - Check if the modal is open or Close (state)
• hasBackdrop: Boolean - Check if the modal as backdrop or not.
• style : {content?: Record<string, string>, backdrop?: Record<string, string>} - object with style property.
• onRequestClose: fn - function to handle closing modal

EXAMPLES

const App = () => {

    const [ isOpen, setIsOpen ] = useState(false);

    const closeModal = () => {
        setIsOpen(false);
    };


    const style = {
        content: {
            ////
        },
        backdrop: {
            ///
        }
    };

    return (
        <>
            <button onClick={() => { setIsOpen(true); }} >open modal</button>
            <Modal isOpen={isOpen} onRequestClose={closeModal} hasBackdrop={true} style={style} >
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque beatae quia, asperiores eveniet ut, iure voluptas earum quos quo reprehenderit incidunt atque quasi voluptatem enim vel ipsa temporibus debitis odit?</p>
            </Modal>
        </>
    );
};