# just-a-modal

> just a modal. simple modal with no dependencies for confirmation and info modals

Latest version **1.1.2** (published 2021-05-11) · GPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install just-a-modal
pnpm add just-a-modal
yarn add just-a-modal
bun add just-a-modal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2021-05-11 |
| First published | 2021-05-08 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | matt e |
| Maintainers | meberhardt |
| Keywords | modal, alert, confirmation, react |

## Links

- npm: https://www.npmjs.com/package/just-a-modal
- Repository: https://github.com/meberhardt2/just-a-modal
- Homepage: https://github.com/meberhardt2/just-a-modal#readme
- Issues: https://github.com/meberhardt2/just-a-modal/issues
- npm.io page: https://npm.io/package/just-a-modal

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

- 1.1.2 (latest) — 2021-05-11
- 1.1.1 — 2021-05-10
- 1.1.0 — 2021-05-10
- 1.0.25 — 2021-05-09
- 1.0.24 — 2021-05-09
- 1.0.23 — 2021-05-09
- 1.0.22 — 2021-05-09
- 1.0.21 — 2021-05-08

## README

# Just A Modal

Sometimes you just need a simple modal, to either get a confirmation before deleting something or to present some info to a user. This is one. You won't get 500 npm modules 
added to your project with this.

* zero dependencies
* overlay automatically added to dim the background
* small, currently around 16KB
* easy to get started with and use

## Installation
```
npm install --save just-a-modal
```

## Usage
```jsx
import React, { useState } from 'react';
import JustAModal from 'just-a-modal';

const [modalInfo, setModalInfo] = useState({
    showModal: false,
    actionID: '',
    action: '',
    config: {}
});

const handleDelete = (id) => {
    let modalInfo = {
        showModal: true,
        actionID: id,
        action: 'deleteBook',
        config: {}
    };

    setModalInfo(modalInfo);
};

const handleCancel = () => {
    let modalInfo = {
        showModal: false,
        actionID: '',
        action: '',
        config: {}
    };

    setModalInfo(modalInfo);
};

const handleAction = (actionID) => {
    if(modalInfo.action === 'deleteBook'){
        //api call to delete book with id of actionID
        //after it completes, close the modal
        handleCancel();
    }
};

<JustAModal modalInfo={modalInfo} handleCancel={handleCancel} handleAction={handleAction} />

```

with an actionID set:
<br />
![alt text](https://github.com/meberhardt2/just-a-modal/blob/main/screenshots/confirmation.png?raw=true)

set actionID to 0 and modal will change from a delete confirmation to a info box:
<br />
![alt text](https://github.com/meberhardt2/just-a-modal/blob/main/screenshots/info.png?raw=true)
![alt text](https://github.com/meberhardt2/just-a-modal/blob/main/screenshots/modal.gif?raw=true)


|modalInfo||
|---|---|
|showModal|boolean true to show the modal, false to hide it|
|actionID|id of item to delete. if missing, modal will be be an info modal|
|action|action that you want to perform if user clicks ok|
|config|object, modal config options|
<br />


|config||
|---|---|
|title|default for confirmation is "Alert", info is "Info"|
|body|default for confirmation is "Are you sure?", info needs a body|
|buttonOKText|default is "OK"|
|buttonDeleteText|default is "Delete"|
|buttonCancelText|default is "Cancel"|
<br />

```
config:{
    title: 'Alert!!',
    buttonDeleteText: 'I am super sure'
}
```
<br />

---
_Source: https://npm.io/package/just-a-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._