Skip to content

Plug-and-play React (portal, hooks and context API) based very elegant, fast and minimal modal.

Notifications You must be signed in to change notification settings

tauqeernasir/react-smart-modal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-smart-modal

Plug-and-play React (portal, hooks and context API) based very elegant, fast and minimal modal.

Screenshot

Summary

This package uses Context API for managing state of modal. It provides access to modal from anywhere in the app using Provider and Consumer. Just wrap your app with ModalProvider and access isOpen: Boolean, openModal: Function, closeModal: Function using ModalConsumer and manage modals easily.

Additionally, this package also provides Modal, ModalHeader, ModalBody and ModalFooter React Components. You can use these components to create your modals. But it's completely optional, you can also pass your own custom built modal components as well.

NOTE: Custom modals will not support any default styles, you'll need to do that yourself.

Installation

# using node package manager
$ npm install --save react-smart-modal

# using yarn package manager
$ yarn add react-smart-modal

Usage

Add another root element beside your root or app element and name it 'portal'. It will be used by the portal to insert modal in tree. See an example below

<div id='app'></div>
<div id='portal'></div>

Once done, follow the rest of the guide.

import React from "react";

import {
  ModalProvider,
  ModalConsumer,
  ModalHeader,
  ModalFooter,
  ModalBody,
  Modal
} from "react-smart-modal";

import MyModal from "./MyModal";

function App() {
  return (
    <ModalProvider>
      <div className="App">
        <h3>Some app content</h3>

        <ModalConsumer>
          {({ isOpen, openModal, closeModal }) => {
            return (
              <button
                onClick={() => {
                  isOpen && closeModal();
                  !isOpen && openModal(MyModel);
                }}
              >
                {isOpen ? "Close Modal" : "Open Modal"}
              </button>
            );
          }}
        </ModalConsumer>
      </div>
    </ModalProvider>
  );
}

// in MyModal.jsx

const MyModal = (
  <Modal width="80%" roundCorners>
    <ModalHeader closeButton>Add you personal information below</ModalHeader>
    <ModalBody>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <input style={{ padding: "10px", width: "350px" }} placeholder="Name" />
      <br />
      <input style={{ padding: "10px", width: "350px" }} placeholder="Age" />
    </ModalBody>
    <ModalFooter>
      <div>
        <button
          style={{ padding: "10px", float: "right" }}
          onClick={() => alert("Adding info")}
        >
          Add Info
        </button>
        <button style={{ padding: "10px" }}>Cancel</button>
      </div>
    </ModalFooter>
  </Modal>
);

export default MyModal;

Modal Customization

If you choose to use provided Modal by this package. You can customize it in various ways.

<Modal />

props type default
width css compatible (e.g. px, %) 60%
height css compatible (e.g. px, %) 400px
roundCorners boolean false

<ModalHeader />

props type default
bg css compatible color (e.g hex or rbg) white
textColor css compatible color (e.g hex or rbg) Black

<ModalFooter />

props type default
bg css compatible color (e.g hex or rbg) white

<ModalBody />

props type default
bg css compatible color (e.g hex or rbg) white
padding css compatible (e.g. px, %) 20px
overflow css compatible value auto

About

Plug-and-play React (portal, hooks and context API) based very elegant, fast and minimal modal.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published