solid-js-modal v1.1.1

solid-js-modal

Simple "dialog" element based "modal" component for Solid-js

Quick start

Installation:

npm i solid-js-modal
# or
yarn add solid-js-modal
# or
pnpm add solid-js-modal

Demo here!

Examples:

import { Modal } from 'solid-js-modal';
import 'solid-js-modal/dist/style.css';
// ...
let modalRef;
// ...
<div>
  <button
    type="button"
    onClick={() => modalRef.showModal()}
  >
    Open modal
  </button>

  <Modal ref={modalRef}>
    <p>This is modal content</p>
  </Modal>
</div>

import { Modal } from 'solid-js-modal';
import 'solid-js-modal/dist/style.css';
// ...
let modalRef;
// ...
<div>
  <button
    type="button"
    onClick={() => modalRef.showModal()}
  >
    Open modal
  </button>

  <Modal ref={modalRef} shouldCloseOnBackgroundClick={false}>
    <button
      type="button"
      onClick={() => modalRef.close()}
    >
      Close modal
    </button>
    <p>This is modal content</p>
  </Modal>
</div>

import { createSignal, Show } from 'solid-js';
import { Modal } from 'solid-js-modal';
import 'solid-js-modal/dist/style.css';
// ...
let modalRef;
const { 0: isVisible, 1: setIsVisibleState } = createSignal(false);
// ...
<div>
  <button
    type="button"
    onClick={() => {
      modalRef.showModal();
      setIsVisibleState(true);
    }}
  >
    Open modal
  </button>

  <Modal
    ref={modalRef}
    onClose={() => {
      setIsVisibleState(false);
    }}
  >
    <Show when={isVisible} fallback={null}>
      <p>This is modal content</p>
    </Show>
  </Modal>
</div>

User guide:

The Modal component has all the attributes that HTMLDialogElement has, except for open.

Props