Svelte overlay

Fully customizable Svelte overlay which fits to available space

Great for creating dropdowns, tooltips and popovers

Svelte overlay is wrapper copmponent which makes all difficult stuff for you, but you decide when to open/close it and how it looks.

Features

• may be nested
• if content has not enough space on one side it will try to render on other side. For instance if position is set to top-left and there's no room on top position will be set to bottom-left. This feature listens to window resize event
• may be open/closed on every trigger and content event or from outside
• you decide how trigger and content looks
• may be closed on click outside, window keydown, or body scroll
• may update position on scroll
• dispatches toggle event when open state changed

Example REPL

<script>
  import Overlay from 'svelte-overlay';
</script>

<Overlay>

  <!-- TRIGGER -->
  <button slot="parent" let:toggle on:click={toggle}>
    Click Me!
  </button>

  <!-- CONTENT -->
  <div slot="content">
    Lorem ipsum dolor sit.
  </div>

</Overlay>

Installation

npm install --save svelte-overlay

or

yarn add svelte-overlay

Props

Important To get it work component requires two slots:

• parent
• content

Overlay props

slot props

Each slot gets theese props, available through let:propName

Usage

Close on escape keydown and click outside REPL

<script>
  import Overlay from 'svelte-overlay';
    let isOpen = false;
    
    function handleWindowKeyDown(event) {
        if (event.key === 'Escape') {
            isOpen = false;    
        }
    }
</script>

<Overlay
    onWindowKeyDown={handleWindowKeyDown}
    closeOnClickOutside
    bind:isOpen={isOpen}
>
  <button slot="parent" let:toggle on:click={toggle}>
    Click Me!
  </button>

  <div slot="content" let:close>
    <p>Lorem ipsum dolor sit.</p>
    <button on:click={close}>Close</button>
  </div>

</Overlay>

Close from content REPL

<script>
  import Overlay from 'svelte-overlay';
</script>

<Overlay>
  <button slot="parent" let:toggle on:click={toggle}>
    Click Me!
  </button>

  <div slot="content" let:close>
    <p>Lorem ipsum dolor sit.</p>
    <button on:click={close}>Close</button>
  </div>

</Overlay>

Open/close on mouseenter/mouseleave REPL

<script>
  import Overlay from 'svelte-overlay';
</script>

<Overlay>
  <button slot="parent" let:open let:close on:mouseenter={open} on:mouseleave={close}>
    Hover Me!
  </button>

  <div slot="content">
    Lorem ipsum dolor sit.
  </div>

</Overlay>

Open from outside REPL

<script>
  import Overlay from 'svelte-overlay';
  let isOpen = false;

  function toggleFromOutside() {
    isOpen = !isOpen;
  }
</script>

<button on:click={toggleFromOutside}>Toggle from outside</button>

<Overlay bind:isOpen={isOpen} >
  <div slot="parent">
    I am a parent
  </div>

  <div slot="content">
    Lorem ipsum dolor sit.
  </div>

</Overlay>

With backdrop, disabled scroll and animations REPL

<script>
  import Overlay from 'svelte-overlay';
  import { fly, fade } from 'svelte/transition';

  let isOpen = false;

  function handleToggle(event) {
    if (event.detail !== isOpen) {
      isOpen = event.detail;
      document.body.classList.toggle('no-scroll', isOpen);
    }
  }
</script>

{#if isOpen}
  <div class="backdrop" transition:fade={{ duration: 200 }}/>
{/if}

<Overlay
  on:toggle={handleToggle}
  closeOnClickOutside
  zIndex={100}
  bind:isOpen={isOpen}>
  <button slot="parent" let:toggle on:click={toggle}>Click Me!</button>
  <div slot="content" transition:fly={{ y: 5, duration: 200 }} class="content">
    Lorem ipsum dolor sit.
  </div>
</Overlay>

<style>
  :global(.no-scroll) {
    overflow: hidden;
  }

  .backdrop {
    z-index: 99;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
  }

  .content {
    border: 1px solid #ddd;
    background: #f7f7f7;
    padding: 1em;
    width: max-content;
  }
</style>

Nested with click outside and close on esc key REPL

<script>
  import Overlay from 'svelte-overlay';
  let isOpen = false;

  function toggleFromOutside() {
    isOpen = !isOpen;
  }
</script>

<button on:click={toggleFromOutside}>Toggle from outside</button>

<Overlay bind:isOpen={isOpen} >
  <div slot="parent">
    I am a parent
  </div>

  <div slot="content">
    Lorem ipsum dolor sit.
  </div>

</Overlay>

License

• MIT license