portal-modals

Setup

This library is available on npm, install it with npm i portal-modals or yarn add portal-modals. Make sure you are using React and ReactDOM version 16.8.0 or later.

Usage

1. Add the following code to your index.html file:

<div id="modal-root"></div>

2. Create a simple modal

import React, { useState } from 'react';
import { Modal } from 'portal-modals';

const App = () => {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      <div>
        <h1>Main Page</h1>
        <button type="button" onClick={() => setShowModal(true)}>
          Open Modal
        </button>
      </div>
      <Modal isVisible={showModal}>
        <div>
          <h1>My Modal</h1>
          <p>My modal paragraph</p>
          <button type="button" onClick={() => setShowModal(false)}>
            Close Modal
          </button>
        </div>
      </Modal>
    </>
  );
};

The isVisible prop is the only obligatory prop that the Modal compoent really needs to work: while true, the modal content is visible, while false, it isn't.

Available Props

Name	Type	Default	Decription
isVisible	boolean	Required	Show the modal?
children	node	Required	The modal content
portalId	string	'modal-root'	Portal html div element id
parentId	string	''	Modal parent div id
hasBackdrop	boolean	true	Renders the backdrop
customBackdrop	node	null	The custom backdrop element
customWrapperStyles	CSSProperties		Modal Wrapper div styles
customBackdropStyles	CSSProperties		Modal backdrop div styles
customContentStyles	CSSProperties		Modal content div styles
onBackdropClick	function	() => null	Called when the backdrop is clicked