https://github.com/funny-family/solid-js-modal
Simple "dialog" element based "modal" component for Solid-js
https://github.com/funny-family/solid-js-modal
component dialog javascript modal solid-js solidjs typescript
Last synced: about 2 months ago
JSON representation
Simple "dialog" element based "modal" component for Solid-js
- Host: GitHub
- URL: https://github.com/funny-family/solid-js-modal
- Owner: funny-family
- License: mit
- Created: 2023-06-17T13:01:28.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2026-02-25T05:26:50.000Z (3 months ago)
- Last Synced: 2026-02-25T10:44:10.930Z (3 months ago)
- Topics: component, dialog, javascript, modal, solid-js, solidjs, typescript
- Language: TypeScript
- Homepage: https://funny-family.github.io/solid-js-modal/
- Size: 499 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# solid-js-modal
[](https://pnpm.io/)
Simple "dialog" element based "modal" component for Solid-js
## Quick start
### Installation:
```bash
npm i solid-js-modal
# or
yarn add solid-js-modal
# or
pnpm add solid-js-modal
```
### [Demo here!](https://funny-family.github.io/solid-js-modal/)
### Examples:
```tsx
import { Modal } from 'solid-js-modal';
import 'solid-js-modal/dist/style.css';
// ...
let modalRef;
// ...
modalRef.showModal()}
>
Open modal
This is modal content
```
```tsx
import { Modal } from 'solid-js-modal';
import 'solid-js-modal/dist/style.css';
// ...
let modalRef;
// ...
modalRef.showModal()}
>
Open modal
modalRef.close()}
>
Close modal
This is modal content
```
```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);
// ...
{
modalRef.showModal();
setIsVisibleState(true);
}}
>
Open modal
{
setIsVisibleState(false);
}}
>
This is modal content
```
### 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)`