portal-modals v1.3.2

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