awesome-modal_by_corentin

1.1.1 • Public • Published

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"
  1. Then, declare your state and close function logic
const [ isOpen, setIsOpen ] = useState(false);

const closeModal = () => {
        setIsOpen(false);
    };
  1. Add content in the modal
<Modal state={modal} config={{}} close={closeModal}>
    {/* content */}
</Modal>
  1. 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>
        </>
    );
};

Readme

Keywords

none

Package Sidebar

Install

npm i awesome-modal_by_corentin

Weekly Downloads

0

Version

1.1.1

License

MIT

Unpacked Size

385 kB

Total Files

13

Last publish

Collaborators

  • corentinc