minimal-react-modal v1.0.2

minimal-react-modal

A minimalistic react modal component.

Installation

npm i minimal-react-modal

Usage

The bare minimal usage of this library is as follows:

import * as React from 'react';
import {ModalContainer, Modal} from 'minimal-react-modal';

React.render(
  <ModalContainer>
    {(openModal, closeModal, isActive) => (
      <div>
        <button onClick={openModal}>click me!</button>
        <Modal
          isActive={isActive}     // required
          closeModal={closeModal} // required
        >
          <h1>modal content</h1>
        </Modal>
      </div>
    )}
  </ModalContainer>
);

ModalContainer

The area where you can call the open/close functions (openModal / closeModal) and access the modal's state (isActive).

Props

Modal

The modal component itself. You must pass the close function (closeModal) and the modal status (isActive) provided by the parent ModalContainer component as props.

Props

Here is another demo utilizing these optional props:

<ModalContainer>
  {(openModal, closeModal, isActive) => (
    <>
      <button onClick={openModal}>click me!</button>
      <Modal
        isActive={isActive}     // required
        closeModal={closeModal} // required
        className="demo"
        showCloseButton={true}
        showAnimation={true}
        modalBoxStyle={{
          width: 500,
          height: 300,
          padding: 30,
        }}
      >
        <h1>modal content</h1>
      </Modal>
    </>
  )}
</ModalContainer>