Renderless Svelte

Modal V2

The Modal V2 icomponent 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 will render whatever component and props has been sent to it as a payload. The rendered component will on top of the props from the payload receive a close function to close the modal again.

Examples