svelte-simple-modal

A simple, small, and content-agnostic modal for Svelte.

Install

npm install --save svelte-simple-modal

Usage

Import the Modal component into your main Svelte component (e.g., App.svelte). The Modal is exposing two context functions open() and close() for opening and closing the modal. open() expects two arguments: a Svelte Component and optionally an object literal with the component's props.

<!-- App.svelte -->
<script>
  import Content from './Content.svelte';
  import Modal from 'svelte-simple-modal';
</script>

<Modal>
  <Content />
</Modal>


<!-- Content.svelte -->
<script>
  import { getContext } from 'svelte';
  import Surprise from './Surprise.svelte';

  const { open } = getContext('simple-modal');

  const showSurprise = () => {
    open(Surprise, { message: "It's a modal!" });
  };
</script>

<p><button on:click={showSurprise}>Show me a surprise!</button></p>


<!-- Surprise.svelte -->
<script>
  export let message;
</script>

<p>
  🎉 {message} 🍾
</p>

Configure your app bundler

IMPORTANT: In your main application's bundler you need to make sure that the svelte dependencies are resolved globally, meaning that the main application's version of svelte is used for bundling.

If you're using Rollup you can achieve this by setting the dedupe option of rollup-plugin-node-resolve as follows:

import resolve from 'rollup-plugin-node-resolve';

export default {
  plugins: [
    resolve({
      // Below is the important line!
      dedupe: ['svelte', 'svelte/transition', 'svelte/internal']
    }),
  ]
};

Parameters

• key: The context key that is used to expose open() and close(). Adjust to avoid clashes with other contexts. (Default: simple-modal)
• setContext: You can normally ingore this property when you have configured your app bundler properly. If you want to bundle simple-modal with its own version of Svelte you have to pass setContext() from your main app to simple-modal using this parameter. (Default: setContext() of the associated svelte version.)
• closeButton: If true a button for closing the modal is rendered. (Default: true)
• closeOnEsc: If true the modal will close when pressing the escape key. (Default: true)
• closeOnOuterClick: If true the modal will close when clicking outside the modal window. (Default: true)
• transitionBg: Transition function for the background. (Default svelte:fade)
• transitionBgProps: Properties of the transition function for the background. (Default {})
• transitionWindow: Transition function for the window. (Default svelte:fade)
• transitionWindowProps: Properties of the transition function for the window. (Default {})
• styleBg: Style properties of the background. (Default {})
• styleWindow: Style properties of the modal window. (Default {})
• styleContent: Style properties of the modal content. (Default {})

License

MIT