Svelte Modal

feelinglovelynow

Simple modal component for Svelte or Sveltekit applications that includes a showModal function, hideModal function and onHideModal callback

Download

💎 Install

pnpm add @feelinglovelynow/svelte-modal
pnpm add @feelinglovelynow/global-style # Only necessary if prerequisite css below is not present

🙏 Description

Simple modal component for Svelte or Sveltekit applications that includes a showModal function, hideModal function and onHideModal callback

💚 Properties

export let header: string = ''
export let onHideModal: () => void = () => {}

💛 Prerequisite CSS

Requires @feelinglovelynow/global-style or add this css to your site

@keyframes fln__fade-in-from-above {
  0% {
    opacity: 0;
    transform: translateY(-9rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fln__fade-out-and-slide-up {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-9rem);
  }
}

html { /* Helps w/ rem, can still look good w/o just set rem/px as desired: https://stackoverflow.com/questions/59920538  */
  font-size: 62.5%;
}

🧡 Example

<script lang="ts">
  import { Modal, type ShowModal, type HideModal, type OnModalHide } from '@feelinglovelynow/svelte-modal'

  let showModal: ShowModal
  let hideModal: HideModal

  const onHideModal = (() => {
    console.log('bye modal')
  }) satisfies OnModalHide

  function bind (e: CustomEvent) {
    showModal = e.detail.showModal
    hideModal = e.detail.hideModal
  }
</script>


<button on:click={ showModal }>Show Modal</button>

<Modal header="Header" on:functions={ bind } { onHideModal }>
  <div>Lorem ipsum</div>
  <button on:click={ hideModal }>Hide Modal</button>
</Modal>

❤️ Add custom styling

.fln__modal-backdrop {

}

.fln__modal {

  &__header {

    &__text {

    }

    &__close {

    }
  }

  &__body {

  }
}

🎁 All our NPM Packages

Top categories