@blaze-react/modal

A modal dialog is a dialog that appears at the top of the main content. Use a modal for dialog boxes, forms, confirmation messages or other content that can be accessed.

Usage no npm install needed!

<script type="module">
  import blazeReactModal from 'https://cdn.skypack.dev/@blaze-react/modal';
</script>

README

Description

A modal dialog is a dialog that appears at the top of the main content. Use a modal for dialog boxes, forms, confirmation messages or other content that can be accessed.

Usage

  • Simple
const actions = [
  {
    callback: () => ({}),
    textButton: "Action 1"
  },
  {
    callback: () => ({}),
    textButton: "Action 2"
  }
];

<Modal title="Simple Modal" actions={actions} IsSimple>
  <p>lorem ipsum dolor...</p>
</Modal>;
  • Alert
const alertActions = [
  {
    callback: () => ({}),
    modifiers: "alert small",
    textButton: "delete"
  }
];

<Modal actions={alertActions} buttonModifiers="rounded alert" isAlert>
  <p>Delete item?</p>
</Modal>;
  • Scrollable
<Modal
  title="Scrollable Modal"
  buttonModifiers="outline dark rounded"
  actions={actions}
>
  <p>
    Content here that may need to be scrolled, can be text/forms/etc. Default
    modal with scrollable content:
  </p>
  <ol>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
  </ol>
  ...etc
</Modal>

API

Modal can receive a number of props as follow:
NAME TYPE DEFAULT
title String empty
actions Array []
isAlert Boolean false
isSimple Boolean false
isUpload Boolean false
showFooter Boolean true
isFullScreen Boolean false
onClose Function () => {}