darshgun/react-standard-modal

A clean & simple modal component for React

react-standard-modal

A clean & simple modal component for React.

Table of Contents

• Demos
• Installation
• Basic usage
• API documentation
• License
• Contributors

Demos

• Basic example
• Storybook example

Installation

To install use yarn,

$ yarn add react-standard-modal

or npm,

$ npm install --save react-standard-modal

Basic usage

import React, { Fragment, useState } from 'react';
import Modal from 'react-standard-modal';

function App() {
  const [isOpen, setIsOpen] = useState(false);
  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <Fragment>
      <Button onClick={() => setIsOpen(true)}>Open modal</Button>
      <Modal open={isOpen} onClose={handleClose}>
        {body}
      </Modal>
    </Fragment>
  );
}

API documentation

Prop	Type	Required	Description
children	node		Provide the contents of your Modal
className	{ Modal: string, Overlay: string, Portal: string }		Class names for Modal, Portal and Overlay components
closeOnOverlayClick	boolean		Todo: Closes the modal when clicking on Overlay.
disableOverlayClick	boolean		Disables Overlay click
disableOverlay	boolean		Specify whether Overlay should render or not. If true, Overlay component will not render.
disablePortal	boolean		If true, Modal & Overlay will mount inside the parent component.
onClose	function	✓	Specify the function that fires on Modal closes.
onOpen	function		Specify the function that fires on Modal opens.
open	boolean	✓	Specify whether the Modal is currently open.
overlayClick	function		Specify the function that fires when clicking on Overlay.
overlayRef	function		Ref callback of the Overlay component.
style	{ Modal: object, Overlay: object, Portal: object }		Inline styles for Modal, Portal and Overlay components.
unMountIfClosed	boolean		If true, the modal will not mount to DOM when it's not open.

License

MIT

Contribute

Contributions of any kind welcome!