entrylabs/entry-modal

entry-modal

Install

Using npm

$ npm install --save @entrylabs/modal

Using yarn

$ yarn add @entrylabs/modal

Example

Codesandbox

• React Component : https://codesandbox.io/s/entry-modal-react-couo2d
• IIFE : https://codesandbox.io/s/entry-modal-iife-rf1rl

Usage

Import - React Component

Using ECMAScript module

import '@entrylabs/modal/dist/entry/entry-modal.css'
import { Alert, Confirm, Prompt } from '@entrylabs/modal';

Using CommonJS module

require('@entrylabs/modal/dist/entry-modal.css');
const { Alert, Confirm, Prompt } = require('@entrylabs/modal');

Import - script

<link rel="stylesheet" href="{prefix}/entry/entry-modal.css" />
<script src="{prefix}/entry-modal.js"></script>
const { alert, confirm, prompt } = EntryModal;

React props

<Alert
  isShow={true}
  content="content"
  title="title"
  onEvent={() => {}}
  options={{ 
    positiveButtonText: "positiveButtonText"
  }}
/>
<Confirm
  isShow={true}
  content="content"
  title="title"
  onEvent={() => {}}
  options={{ 
    negativeButtonText: "negativeButtonText",
    positiveButtonText: "positiveButtonText"
  }}
/>
<Prompt
  isShow={true}
  content="content"
  defaultValue="defaultValue"
  title="title"
  onEvent={() => {}}
  options={{ 
    placeholder: "ppp",
    negativeButtonText: "negativeButtonText",
    positiveButtonText: "positiveButtonText"
  }}
/>

iife props

await EntryModal.alert('content', 'title', {
  positiveButtonText: "positiveButtonText"
});
const bool = await EntryModal.confirm('content', 'title', {
  negativeButtonText: "negativeButtonText",
  positiveButtonText: "positiveButtonText"
});
const value = await EntryModal.prompt('content', 'defaultValue', 'title', {
  placeholder: "ppp",
  negativeButtonText: "negativeButtonText",
  positiveButtonText: "positiveButtonText"
});