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

Prop name	Description	Default value	Example value
shouldCloseOnBackgroundClick	Allow to close modal on background click.	true	false
onOpen	Callback fired the modal is opened.	n/a	(event) => console.log('open event:', event)