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-portalUsage
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 |