HivePostList

Post feed with sorting, pagination, pinned posts, and multiple layout variants. Supports global ranked posts, community feeds, and tag filtering.

Uses bridge.get_ranked_posts

Fetches posts from the Hive blockchain via the Bridge API. Use the tag prop to filter by community (e.g. hive-167922) or by tag (e.g. photography). Without a tag, returns global ranked posts. Requires HiveProvider wrapper.

Usage

<script lang="ts">
  import { HivePostList } from "@hiveio/honeycomb-svelte";
</script>

<HivePostList sort="trending" limit={10} />

Preview

Pinned

Welcome to Hive - Getting Started Guide

@hiveio

312 87$124.50

Building DApps on Hive Blockchain

@barddev

89 24$15.30

Weekly Development Update #42

@hivebuzz

156 45$32.10

Understanding Resource Credits

@peakd

67 12$8.75

Page 1

Props

Prop	Type	Default	Description
`sort`	`"trending" \| "hot" \| "created" \| "payout" \| "muted"`	`"trending"`	Sort order for the post feed
`tag`	`string`	-	Community name (`hive-167922`) or tag (`photography`). Omit for global feed.
`limit`	`number`	`20`	Posts per page
`pinned_posts`	`Array<{ author: string; permlink: string }>`	`[]`	Posts pinned at the top of the list
`show_sort_controls`	`boolean`	`false`	Show sort buttons above the list
`variant`	`"card" \| "compact" \| "grid"`	`"compact"`	Layout variant for post items
`hide`	`("author" \| "thumbnail" \| "payout" \| "votes" \| "comments" \| "time")[]`	`[]`	Elements to hide from post cards
`linkTarget`	`string`	`"https://blog.openhive.network"`	Base URL for post links
`class`	`string`	-	Additional CSS classes

useHivePostList Hook

For full control over the post feed, use the useHivePostList hook directly. It returns posts, loading state, pagination controls, and sort management.

Return values

Property	Type	Description
`posts`	`RankedPost[]`	Current page of ranked posts
`is_loading`	`boolean`	Whether data is being fetched
`error`	`Error \| null`	Fetch error, if any
`sort`	`SortType`	Current sort method
`set_sort`	`(sort: SortType) => void`	Change sort method (resets to page 1)
`page`	`number`	Current page number
`has_prev` / `has_next`	`boolean`	Whether previous/next page exists
`prev_page` / `next_page`	`() => void`	Navigate to previous/next page

Example

<script lang="ts">
  import { useHivePostList } from "@hiveio/honeycomb-svelte";

  const sorts = ["trending", "hot", "created"];
  const feed = useHivePostList({ sort: "trending", tag: "hive", limit: 10 });
</script>

{#if feed.is_loading}
  <p>Loading...</p>
{:else if feed.error}
  <p>Error: {feed.error.message}</p>
{:else}
  <div>
    <div class="flex gap-2 mb-4">
      {#each sorts as s}
        <button
          class:font-bold={feed.sort === s}
          onclick={() => feed.set_sort(s)}
        >
          {s}
        </button>
      {/each}
    </div>

    {#each feed.posts as post (`${post.author}/${post.permlink}`)}
      <article>
        <h3>{post.title}</h3>
        <p>by @{post.author} - {post.payout_value}</p>
      </article>
    {/each}

    <div class="flex gap-2 mt-4">
      <button onclick={feed.prev_page} disabled={!feed.has_prev}>Previous</button>
      <span>Page {feed.page}</span>
      <button onclick={feed.next_page} disabled={!feed.has_next}>Next</button>
    </div>
  </div>
{/if}

Examples

Community posts

Pass a community name (format hive-NNNNNN) as the tag prop to show posts from that community.

<script lang="ts">
  import { HivePostList } from "@hiveio/honeycomb-svelte";
</script>

<HivePostList
  tag="hive-167922"
  sort="trending"
  show_sort_controls
  limit={10}
/>

Tag filter

Pass any Hive tag to filter posts. Works with all sort options.

<script lang="ts">
  import { HivePostList } from "@hiveio/honeycomb-svelte";
</script>

<HivePostList
  tag="photography"
  sort="created"
  limit={10}
/>

Sort controls

<script lang="ts">
  import { HivePostList } from "@hiveio/honeycomb-svelte";
</script>

<HivePostList
  sort="trending"
  tag="hive"
  show_sort_controls
/>

Pinned posts

<script lang="ts">
  import { HivePostList } from "@hiveio/honeycomb-svelte";

  const pinned = [
    { author: "hiveio", permlink: "welcome-to-hive" },
    { author: "barddev", permlink: "hive-ui-announcement" },
  ];
</script>

<HivePostList
  sort="created"
  pinned_posts={pinned}
/>

Variants

<!-- Compact (default) - single-line rows -->
<HivePostList sort="trending" variant="compact" />

<!-- Card - full post cards with body preview -->
<HivePostList sort="trending" variant="card" />

<!-- Grid - responsive image grid -->
<HivePostList sort="trending" variant="grid" />

Hide elements

<!-- Hide specific elements from post items -->
<HivePostList
  sort="trending"
  hide={["thumbnail", "payout", "time"]}
/>

<!-- Available: "author" | "thumbnail" | "payout" | "votes" | "comments" | "time" -->

Post Card Content Renderer