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

import { HivePostList } from "@hiveio/honeycomb-react";

function TrendingFeed() {
  return <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
`className`	`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

import { useHivePostList } from "@hiveio/honeycomb-react";

function CustomFeed() {
  const {
    posts,
    is_loading,
    error,
    sort,
    set_sort,
    has_next,
    has_prev,
    next_page,
    prev_page,
    page,
  } = useHivePostList({ sort: "trending", tag: "hive", limit: 10 });

  if (is_loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <div className="flex gap-2 mb-4">
        {["trending", "hot", "created"].map((s) => (
          <button
            key={s}
            onClick={() => set_sort(s)}
            className={sort === s ? "font-bold" : ""}
          >
            {s}
          </button>
        ))}
      </div>

      {posts.map((post) => (
        <article key={`${post.author}/${post.permlink}`}>
          <h3>{post.title}</h3>
          <p>by @{post.author} - {post.payout_value}</p>
        </article>
      ))}

      <div className="flex gap-2 mt-4">
        <button onClick={prev_page} disabled={!has_prev}>Previous</button>
        <span>Page {page}</span>
        <button onClick={next_page} disabled={!has_next}>Next</button>
      </div>
    </div>
  );
}

Examples

Community posts

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

import { HivePostList } from "@hiveio/honeycomb-react";

// Show posts from a specific community
function LeoFinanceFeed() {
  return (
    <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.

import { HivePostList } from "@hiveio/honeycomb-react";

// Filter posts by a specific tag
function PhotographyFeed() {
  return (
    <HivePostList
      tag="photography"
      sort="created"
      limit={10}
    />
  );
}

Sort controls

import { HivePostList } from "@hiveio/honeycomb-react";

// Show sort buttons (trending, hot, created, payout, muted)
function FeedWithControls() {
  return (
    <HivePostList
      sort="trending"
      tag="hive"
      show_sort_controls
    />
  );
}

Pinned posts

import { HivePostList } from "@hiveio/honeycomb-react";

// Pin specific posts to the top of the list
function FeedWithPinned() {
  return (
    <HivePostList
      sort="created"
      pinned_posts={[
        { author: "hiveio", permlink: "welcome-to-hive" },
        { author: "barddev", permlink: "hive-ui-announcement" },
      ]}
    />
  );
}

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