thaind97git / pure-modal-react-portal

A simple, pure, and accessible modal component for React with portal support.

pure-modal-react-portal

Simple modal component for ReactJS with Portal

• Without dependencies
• Support React Portal
• Easy to custom style

Demo

https://thaind97git.github.io/pure-modal-react-portal

Installation

npm install --save pure-modal-react-portal

Usage

Jsx Component:

import React, { useState } from 'react';
import PureModal from 'pure-modal-react-portal';

const App = () => {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open Modal</button>
      <PureModal
        prefixCls="custom-modal"
        open={open}
        onClose={() => setOpen(false)}
      >
        <div>Modal Content</div>
      </PureModal>
    </div>
  );
};
export default Modal;

Styling:

.custom-modal {
  &__close-element {
    display: block;
    width: 54px;
    height: 54px;
    line-height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &__wrapper-content {
    padding-bottom: 24px;
    top: 100px;
  }
  &__content {
    .header {
      padding: 16px 24px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: 2px 2px 0 0;
    }
    .body {
      padding: 24px;
    }
    .footer {
      padding: 10px 16px;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: 0 0 2px 2px;
    }
  }
}

Props:

Name	Type	Default	Description
open	boolean	false	State to open/close modal
onClose	void	() => {}	Close modal callback
destroyOnClose	boolean	false	Unmount modal when closed
maskCloseable	boolean	true	Close outside modal to close
zIndex	number	1000	Z-index of modal
prefixCls	string	""	Prefix class modal to custom style
closeIcon	JSX.Element or string	null	Custom close modal icon
header	JSX.Element or string	null	Header section
footer	JSX.Element or string	null	Footer section
children	JSX.Element or string		Modal children