Components
Feed

A feed is a section of a page that automatically loads new sections of content as the user scrolls. The sections of content in a feed are presented in article elements. So, a feed can be thought of as a dynamic list of articles that often appears to scroll infinitely.

View ARIA Spec

W3C

View Source

GitHub

Example

This example uses the wingetdotrun api to get a list of packages available from winget.

<script>
  import { Feed, FeedItem } from "svaria";
  import { onMount } from "svelte";

  let loading = false;
  let page = 0;
  let items = [];

  let fetchItems = async () => {
    loading = true;
    fetch(`https://api.winget.run/v2/packages?page=${page}`)
      .then((e) => e.json())
      .then((e) => {
        items = items.concat(e.Packages);
        page += 1;
      })
      .catch(console.error)
      .finally(() => (loading = false));
  };

  onMount(() => fetchItems());
</script>

<h3 id="feed-label">Winget Packages</h3>
<Feed isLoading={loading} feedLabelId="feed-label">
  {#each items as item, i}
    <FeedItem
      labelId={item.Id}
      descriptionId="{item.Id}-desc"
      itemCount={items.length}
      index={i}
    >
      <div>
        <h4 id={item.Id}>{item.Latest.Name}</h4>
        {#if item.Latest.Description}
          <p id="{item.Id}-desc">{item.Latest.Description}</p>
        {/if}
      </div>
    </FeedItem>
  {/each}
</Feed>

<button on:click={() => fetchItems()}>Fetch more items</Button>

Winget Packages

Keyboard Shortcuts

Key	Dispatched Event	Description
`PageDown`	`on:next`	Move focus to next article.
`PageUp`	`on:previous`	Move focus to previous article.

Feed Props

Name	Type	Required	Description
`feedLabelId`	`string`	`true`	An element ID selector that points to a piece of text which gives an appropriate label to the feed
`isLoading`	`boolean`	`true`	Set to true if new elements are about to be loaded

FeedItem Props