# @opendapps/modal-window
> Modal window controller and react-component
Latest version **0.0.4** (published 2023-03-03) · MIT license · 0 weekly downloads
## Install
```sh
npm install @opendapps/modal-window
pnpm add @opendapps/modal-window
yarn add @opendapps/modal-window
bun add @opendapps/modal-window
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities.
Warnings: low downloads; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.4 |
| Published | 2023-03-03 |
| First published | 2023-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 39.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Alexandr |
| Maintainers | knownout |
| Keywords | modal, modal-windows, react, mobx |
## Links
- npm: https://www.npmjs.com/package/@opendapps/modal-window
- Repository: https://github.com/open-dapps/modal-window
- Homepage: https://github.com/open-dapps/modal-window#readme
- Issues: https://github.com/open-dapps/modal-window/issues
- npm.io page: https://npm.io/package/@opendapps/modal-window
## Dependencies (5)
- [mobx](https://npm.io/package/mobx.md) ^6.6.2
- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [@knownout/lib](https://npm.io/package/@knownout/lib.md) ^0.1.4
- [mobx-react-lite](https://npm.io/package/mobx-react-lite.md) ^3.4.0
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 0.0.4 (latest) — 2023-03-03
- 0.0.3 — 2023-03-03
- 0.0.2 — 2023-03-03
- 0.0.0 — 2023-03-03
## README
# 🧊 Modal window
This package is designed to simplify the process of adding modal windows to your web applications by providing
both a modal window controller and the modal window component itself.
## Installation and controller usage
Package installation is done in the standard way:
```shell
yarn[npm, pnpm] add -D @opendapps/modal-window@latest
```
For any actions with modal windows, you will need a modal window key, which can be created in two ways:
```ts
const controller = useModalWindowController()
const mykey = controller.getModalKey() // Generates random modal key
// Or create modal key from specified string
const myCustomkey = controller.getModalKey("Any string")
```
This function call will return an instance of the `ModalWindowKey` class, which can be used as a modal
window key or transformed into a string by calling the `toString` method.
If there is no need for a React component, you can use only the controller:
```ts
const controller = useModalWindowController()
// Add modal window key to modals map
controller.connectModalWindow("Modal window key")
// Open modal window if not opened
controller.openModal("Modal window key")
// Close modal window if not closed
controller.closeModal("Modal window key")
// Switch modal window open/close states
controller.switchModal("Modal window key") // => boolean
// Get current modal window state
controller.getModalState("Modal window key") // => ModalWindowState
// Remove modal window from modals map
controller.disconnectModal("Modal window key")
// Returns all connected modal keys
controller.connectedModalKey
```
If you need to change the basic controller parameters, you can do so like this:
```ts
const controller = useModalWindowController({
animationDuration: 300, // time in ms, default is 300
outerClickClose: true // close modal if clicked outside of box
})
```
However, such a call will overwrite the global controller settings and change the behavior of all modal windows.
To avoid such behavior, you can configure the configuration for specific keys:
```ts
const controller = useModalWindowController({
animationDuration: 300, // time in ms, default is 300
outerClickClose: true // close modal if clicked outside of box
}, ["Modal window key 1", "Modal window key 2", /* ... */])
// Or
controller.updateConfig({
/* new configuration */
}, ["Modal window keys..."])
```
## Modal window states
Each modal window can be in several specific states, which are defined by the `enum ModalWindowState` object:
| State | Description |
|---------------|----------------------------------------------|
| PREPARE | Modal window preparing to be opened |
| OPENING | Playing modal window open animation |
| OPEN | Modal window opened |
| CLOSING | Playing modal window close animation |
| CLOSE | Modal window closed |
| NOT_CONNECTED | Modal window not connected to the controller |
The `PREPARE` state is set for the component before it is opened, allowing you to start the animation.
After 10ms, the `PREPARE` state is changed to `OPENING`.
## Modal window component usage
The modal window component provides the foundation for building modal windows: a background layer, a centered block with
the ability to change the header, and a close button for the modal window.
```tsx
function MyModalWindow () {
return (
My cool modal window
Hello world!
)
}
```
Modal window component accepts following props:
| Prop | Type | Description |
|--------------------|----------------|---------------------------------------------------------------------------|
| modalKey | ModalWindowKey | Key of the modal window |
| onClose | Function | Fires when modal window state changes to `CLOSED` |
| onOpen | Function | Fires when modal window state changes to `OPEN` |
| overrideCloseEvent | Function | Overrides close event, fires when modal window state changes to `CLOSING` |
---
_Source: https://npm.io/package/@opendapps/modal-window · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._