pure-modal-react-portal v0.1.0

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: