Renderless Svelte

Modal

The Modal component encapsulates typically modal behaviour as opening and closing, it does this while ensuring only one Modal is open at all times. As always in Renderless-Svelte the actual implementation of the look and feel of the Modal, including potential backdrops is completely up to the user.

In order to work the Modal has to be defined in the markup somewhere, this can be easily done in places like App.svelte, or if using Sapper _layout.svelte. Since it shares resources accross the board, it could even be mounted as seperate component in the index.js file.

openModal()

The openModal function, exposed from the Modal takes as an argument a payload, it is this payload that will be send on to the Modal itself.

import { openModal } from 'renderless-svelte'

openModal({ ... })

closeModal()

The closeModal function will, when executed, close the modal. This can be used in combination with svelte:window to bind a key to close the modals.

<script>
    import { closeModal } from 'renderless-velte'
</script>

<svelte:window on:keyup={ev => ev.key === 'Escape' && closeModal()}></svelte:window>

Modal

The Modal component takes a slot that will be shown if a payload has been send to the Modal. It has two fields:

Examples