https://github.com/delpikye-v/react-modal
React-hook modal portal. (create npm lib)
https://github.com/delpikye-v/react-modal
modal react-modal react-ts
Last synced: 4 months ago
JSON representation
React-hook modal portal. (create npm lib)
- Host: GitHub
- URL: https://github.com/delpikye-v/react-modal
- Owner: delpikye-v
- License: mit
- Created: 2022-07-08T22:52:49.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-11-08T16:05:57.000Z (over 3 years ago)
- Last Synced: 2025-09-19T01:13:57.171Z (8 months ago)
- Topics: modal, react-modal, react-ts
- Homepage: https://www.npmjs.com/package/react-modal-e2z
- Size: 19.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
---
#### Description
+ Simple modal.
+ Append to portal
---
### Usage
Install the package
```js
npm install --save react-modal-e2z
```
Import the module in the place you want to use:
```js
import "react-modal-e2z/build/styles.css";
import Modal from "react-modal-e2z";
```
#### Snippet
```js
const [isShow, setShow] = React.useState(false);
This is modal
{/*
{[...Array(10)].map((item, index) => {
return
index {index};
})}
*/}
```
---
#### props
see index.d.ts
| props | type | description |
|----------------------|-------------------------------|----------------------------------------------------------------------------|
|id? | string
|modalId? | string
|isOpen? | boolean
|center? | boolean (false)
|className? | string
|showHeader? | boolean (true)
|showFooter? | boolean
|modalTitle? | string
|modalHeader? | ReactNode
|modalFooter? | ReactNode
|customizeXClose? | string / React.ReactNode;
|alignFooter?: | "RIGHT" / "CENTER" / "LEFT"
|fullButtonhMobile?: | boolean;
|showExtraButton? | boolean (false)
|showAcceptButton? | boolean (true)
|showCancelButton? | boolean (true)
|showXClose? | boolean (true)
|disabledClose? | boolean (false)
|escapeClose? | boolean (true)
|outSideClose? | boolean (true)
|toggleTitleExpand? | boolean (false) (dbClickEvent)
|fullSceen? | boolean (false)
| |
|classNameAccept? | string
|classNameCancel? | string
|classNameExtra? | string
|labelAccept? | string ("OK")
|labelCancel? | string ("CANCEL")
|labelExtra? | string ("EXTRA")
|handleToggle? | Function // fullSceen or default
|handleAccept? | Function
|handleCancel? | Function
|handleXClose? | Function // default like handleCancel
|handleExtra? | Function // when showExtraButton = true
|handleOpen? | Function // => handle show modal
#### Note
class for button action:
modal2-danger-button, modal2-light-button, modal2-primary-button, modal2-secondary-button
#### RUN
### License
MIT