Skip to content

Instantly share code, notes, and snippets.

@joshwashywash
Last active February 27, 2022 00:15
Show Gist options
  • Save joshwashywash/f8f814ec4e278b0b3ba8d80282bba6c5 to your computer and use it in GitHub Desktop.
Save joshwashywash/f8f814ec4e278b0b3ba8d80282bba6c5 to your computer and use it in GitHub Desktop.
generic list component for svelte

Here's how you can know what type item has in the parent component so you get nice autocompletion :)

<script lang="ts">
  type Item = $$Generic;
  export let items: Item[] = [];
</script>

<ul>
  {#each items as item, index}
    <li>
      <slot {item} {index} />
    </li>
  {/each}
</ul>

use it like this

<List items={['you', 'are', 'so', 'cool']} let:item>
  <p>{item}</p>
</List>

The type of item in the paragraph tag will be string instead of any.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment