minimal-react-modal

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

propName	type	required	default	description
activeOnLoad	boolean	x	false	whether the modal should be active on load

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

propName	type	required	default	description
isActive	boolean	o	-	(provided by ModalContainer)
closeModal	() => void	o	-	(provided by ModalContainer)
className	string	x	null	classname(s) to append to the modal box
showCloseButton	boolean	x	false	whether to show the close button on the top right corner
showAnimation	boolean	x	false	whether to animate modal opening
modalBoxStyle	React.CSSProperties	x	{}	overrides modal styles
closeButtonStyle	React.CSSProperties	x	{}	overrides default close button style (make sure showCloseButton is true)
overlayStyle	React.CSSProperties	x	{}	overrides modal background overlay style

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>