svelte-helpers

Installation

npm i svelte-helpers --save

This library contains some helpers I've found useful for working with Svelte.

Spring helpers

svelte-helpers/spring-transitions has functions to help you use spring animations in an enter or exit transition.

springIn((from: number), (to: number), (springConfig: object));
springOut((from: number), (to: number), (springConfig: object));

Both of these functions return an object with a duration, and tickToValue property, for use in a Svelte transition. Duration is the duration of the given spring, while tickToValue is a lookup function that will return the spring's actual value for a given value of t in the transition's css function. For example:

import { springIn, springOut } from "svelte-helpers/spring-transitions";

const SPRING_IN = { stiffness: 0.1, damping: 0.1 };
const animateIn = node => {
  const { duration, tickToValue } = springIn(-80, 0, SPRING_IN);
  return {
    duration: duration,
    css: t => `transform: translateY(${tickToValue(t)}px)`
  };
};

const SPRING_OUT = { stiffness: 0.1, damping: 0.5, precision: 3 };
const animateOut = node => {
  const current = currentYTranslation(node);
  const { duration, tickToValue } = springOut(
    current ? current : 0,
    80,
    SPRING_OUT
  );

  return {
    duration: duration,
    css: t => `transform: translateY(${tickToValue(t)}px)`
  };
};

{#if open}
  <div in:animateIn out:animateOut class="box">
    Hello World!
  </div>
{/if}

Modal

A declarative modal component. Receives an open prop that, when true, renders the modal with an overlay behind it. The modal fires a close event when the user clicks outside the modal, or presses escape. The handler should ultimately cause your open prop to become false.

The modal and overlay will both animate in and out. These animations are not (yet) configurable.

<script>
  import Modal from "svelte-helpers/Modal";

  let modalOpen = false;
  const closeModal1 = () => (modalOpen = false);
</script>

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

<Modal open={modalOpen} on:close={closeModal1}>
  <h1>Hi there</h1>
  <button on:click={() => (modalOpen = false)}>Close</button>
</Modal>

Live Demo

Here

Props

Events

The Modal also has a closeModal method you can bind to, and call as needed.

{#if open3a}
  <Modal modalKey="modal3a" open={true} deferStateChangeOnClose={true} bind:closeModal={closeModal3a} on:close={() => (open3a = false)}>
    <button on:click={closeModal3a}>Close</button>
  </Modal>
{/if}

This can be used whether conditionally rendering (explained below), or not.

Conditional Rendering

If you need to conditionally render the modal, ie something like this

<script>
  import Modal from "svelte-helpers/Modal.svelte";
  let closeThisModal;
</script>

{#if open3}
  <Modal modalKey="modal3" open={true} deferStateChangeOnClose={true} on:close={() => (open3 = false)} useContentWidth={true} bind:closeModal={closeThisModal}>
    <ModalDemo2 />
  </Modal>
{/if}

Pass true to the deferStateChangeOnClose prop. Doing this will cause the close behavior of the modal to first run the standard exit animation, and then, once the modal is gone, fire the close event, to reset your state.

If you need to imperatively close a modal that's conditionally rendered, bind to the closeModal method, described above, or if inside a component rendered by the Modal, just grab the closeModal method from context, described below. If (and only if) conditionally rendering your modal, you need to use one of these two methods to close your modal imperatively. Do not just reset your state, since this will immediately unmount the modal's content, without the proper unmount animations.

Context

Within a modal there is a svelte-helpers-modal context value that's an object, with the following properties

Style Overrides

The modal has a global css class of svelte-helpers-modal-content applied. Add your own overrides as needed.

AutoSuggest

<script>
  import AutoSuggest from "svelte-helpers/AutoSuggest";
</script>

<AutoSuggest filterField={'name'} displayField="name" placeholder="Search" {options}>
  <div slot="result" let:option>{option.name}</div>
  <span slot="no-results" style="color: blue">No Results, yo</span>
</AutoSuggest>

Live Demo

Here

Props

Slots

result - the slot for each option the user is viewing
no-results - the slot to show when there are no results to display

CSS Overrides

The following CSS variables can be overridden to customize this component's appearance