Neighborly Package Megalodon
Wondering what’s next for npm?Check out our public roadmap! »


1.0.3 • Public • Published

Yet Another Svelte Package: Modals

Modals wrapper for Svelte3


  • No top-level Modals context
  • open and close modals easily with a function
  • No crazy boilerplate


npm install --save-dev yasp-modals

Very quick example

View live there :

<!-- App.svelte -->
  import { Modals, openModal, closeModal } from 'yasp-modals';
  import MySimpleModal from 'MySimpleModal.svelte';

  function onClick() {
    openModal(MySimpleModal, {
      title: 'My Modal',

  <a class="back" href="/">&lt; Back to examples</a>

<main>Main content Blablabl</main>
<button on:click="{onClick}">Open Modal !</button>
<Modals />

<!-- MySimpleModal.svelte -->
  import { fly } from "svelte/transition";
  export let title = "My Modal Title";

  export let closeModal;
  let props = {};
  let classname = "";
  $: {
    props = $$props;
    if (props.class) {
      classname = props.class;

    delete props.class;

  .modal {
    min-width: 400px;
    min-height: 400px;
    background-color: white;
    text-align: center;
    display: flex;
    flex-direction: column;

  .modal__footer {
    background-color: darkcyan;
    color: white;
    padding: 20px;

  h1 {
    margin: 0;

  .modal__body {
    padding-top: 40px;
    flex: 1 1 0;

  class={`modal ${classname}`}
  transition:fly={{ y: 100, duration: 400 }}>
  <header class="modal__header">
  <div class="modal__body">My modal content !</div>
  <header class="modal__footer">
    <button on:click={() => closeModal()}>Cancel</button>

Components & methods

This package provides 1 Component and 2 methods, an event emitter and one store to use

Components :

  • Modals


  • openModal
  • closeModal



<Modals {options?:object}>


Parameter Optional Description
options optional Options for the modal layout and behavior
  • options
    • close
      • showBtn: boolean (default: true) - if a button to close the modal wrapper is added to the layout. Will have modals__close for classname
      • btnText: string (default: 'close') - the text to show in the close button
      • onClickOutside: boolean (default: true) - if the modals wrapper closes when clicking outside a modal content
      • onEscKey: boolean (default true) - if the modals wrapper closes when the esc key is pressed
    • transition
      • type: svelte/transition (default: fade) - the transition type for wrapper appearance
      • props: object (default: {}) - the transition properties
    • props: object
      • style: string (default: see src/components/Modals.svelte) - the style to apply to the wrapper
      • all properties in this object will be passed as attributes using {...props} to the wrapper element

openModal(component:SvelteComponent, props?:object)

Opens a Modal

  • component - the component to add to the Modal wrapper
  • props: object (default: {}) - props to pass to the component

When a component is rendered, it will also have openModal and closeModal as properties


Closes the current modal


emitter is an EventEmitter.


  • open ({component, props}) - emitted when a Modal is opened
  • beforeClose - emitted before closing a Modal
  • close - emitted when a modal closes


Modals is a custom store. It contains a reference to openModal, closeModal and the emitter.

When the no modal is opened, $modals as for value null When a modal is opened, $modals as for value {component, props}

Other examples Shipped with this package

The directory examples contains examples of different usage of this package.

  • the most basic way to open a modal

The best way to test the example(s) is to clone this repository and launch the examples quick server shipped within

git clone
cd yasp-modals/examples
npm install
npm run dev

This should create a local server accessible to http://localhost:3333 (if you kept the default port)


Simon Fremaux / dievardump (


npm i yasp-modals

DownloadsWeekly Downloads






Unpacked Size

55.5 kB

Total Files


Last publish


  • avatar