Pixel-Modal

Very simple and lightweight Modal widget for SvelteKit based on stores. Fully Typed.

Supports svelte 3 and 4

To install package run:

# installation
npm install pixel-modal

Usage

Import Container component in your layout.svelte (or wherever you need modals).

<script>
  import Container from 'pixel-modal';
</script>

<Container />

Use show method to show modal window. Also, you can put it in async function (to import component asynchronously); As second parameter you can provide props and as third - options.

#simple-usage. This will show component in modal
<script>
import {modal} from 'pixel-modal';
import TestComponent from './TestComponent.svelte';

const show = () => modal.show({component: TestComponent});
</script>

<button on:click={show}>show modal</button>

#Async example. This will show component in modal but component will load asynchronously
<script>
import {modal} from 'pixel-modal';

const show = async () => modal.show({component: (await import('./TestComponent.svelte')).default});
</script>

<button on:click={show}>show modal</button>

#Usage with props and options
<script>
import {modal} from 'pixel-modal';

const show = async () => modal.show({
  component: (await import('./TestComponent.svelte')).default,
  data: {yourProp: 123},
  options: {
      maxWidth: 768;
      height: 500;
      scrollable: true;
      # default class will show white modal with default styles. !!!Without containerClass there are will be no styles
      containerClass: 'default';
      overlayClass: 'my-awesome-class';
  }
});
</script>

<button on:click={show}>show modal</button>

#In your component
<script>
#your props object
export let props;
#cancel method. Call it to close modal
export let cancel;
</script>