# line-modal-custom

> > This library will be released soon as 1.0 with a whole new codebase! Stay tuned!

Latest version **1.0.1** (published 2021-06-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install line-modal-custom
pnpm add line-modal-custom
yarn add line-modal-custom
bun add line-modal-custom
```

## 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.0.1 |
| Published | 2021-06-01 |
| First published | 2021-05-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | James |
| Maintainers | smallt93 |

## Links

- npm: https://www.npmjs.com/package/line-modal-custom
- npm.io page: https://npm.io/package/line-modal-custom

## Recent versions

- 1.0.1 (latest) — 2021-06-01
- 1.0.0 — 2021-05-27

## README

# Moal custom

> This library will be released soon as 1.0 with a whole new codebase! Stay tuned!

A vanilla js library for creating alerts, confirm, and prompt.

---

## Need help?
Create an issue or write me tri.nguyen@linecorp.com

## Install

Install modal-custom is quite easy.

### Install script

Just include the script `dist/modal-custom.min.js` into your project and put the script before the closing body tag.

``` html
<html>
    <body>
        <script src="../dist/modal-custom.min.js"></script>
    </body>
</html>

```


## Components

### Alert with string

``` javascript

    const { Modal } = LineModal;

    modal.alert('Hello world');


```

### Alert with object

``` javascript

    const { Modal } = LineModal;

    modal.alert({
        msg: 'Hello world'
    });

```

### Confirm

``` javascript

    const { Modal } = LineModal;

    modal.alert({
        msg: 'Are you sure?',
        onOk: () => {
            console.log('Sure')
        },
        onCancel: () => {
            console.log('Not yet')
        }
    });

```

### Prompt

``` javascript

    const { Modal } = LineModal;

    modal.alert({
        msg: 'Where are you?',
        onOk: (val) => {
            console.log(val)
        },
        onCancel: () => {
            console.log('Im from nowhere')
        }
    });

```

### Styling

You can use `styles` to custom modal wrapper

``` javascript

    const { Modal } = LineModal;

    modal.alert({
        styles: `
            margin: 5px;
            padding: 8px;
            display: inline-block;
        `,
    });

```

Or use `class` to set your style by class

``` javascript

    const { Modal } = LineModal;

    modal.alert({
        class: 'my-modal-wrapper',
    });

```

## Config / Option

When creating a new Object of an Alert, Prompt, or Confirm, this object has a few options that you can change.

key | description | type | mandatory|
----|-----------|----|-----|
msg | Message | string | true |
class | Class in html | string | false |
styles | Styles of modal wrapper | string | false |
textOk | Text for the submit button | string | false |
textCancel | Text for the cancel button | string | false |
textPlaceholder | Placeholder text (prompt) | string | false |
onOk | Fires when a user has accepted | (value: string) => string | true |
onCancel | Fires when a user has canceled | func | true |

## Questions
For questions and support feel free to create an issue or write an email to
tri.nguyen@linecorp.com

## Issues
If you found a bug, then please create an issue. It will help me a lot to make my work better. :)

## Contribution
Pull requests are always welcome. I am always happy to see others working on
my GitHub projects.

## Get in touch
Write an email to tri.nguyen@linecorp.com :)

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