solid-js-modal


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

Quick start

$3

``bash
npm i solid-js-modal

or

yarn add solid-js-modal

or

pnpm add solid-js-modal
`

$3

$3

`tsx
import { Modal } from 'solid-js-modal';
import 'solid-js-modal/dist/style.css';
// ...
let modalRef;
// ...

type="button"
onClick={() => modalRef.showModal()}
>
Open modal

This is modal content

`

`tsx
import { Modal } from 'solid-js-modal';
import 'solid-js-modal/dist/style.css';
// ...
let modalRef;
// ...



`

`tsx
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);
// ...



`

$3

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)`