HivePostCard

Display Hive posts with title, author, content preview, stats, and metadata.

Display-only component

Fetches post data automatically via condenser_api. Displays post content, author, stats, and metadata. Requires HiveProvider wrapper.

Usage

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

function PostFeed() {
  return (
    <HivePostCard
      author="barddev"
      permlink="my-first-post"
    />
  );
}

Preview

Card (default)

@barddev

2h ago

Building Components for Hive

Learn how to create reusable React components that interact with the Hive blockchain...

42 12

$8.45

Compact

Quick Update on Development Progress

@barddev · 5h ago

56 8$3.21

Grid

Honeycomb Components Tutorial

@barddev · 1d ago

89 24

$15.30

Props

Prop	Type	Default
`author`	`string`	required
`permlink`	`string`	required
`variant`	`"card" \| "compact" \| "grid"`	`"card"`
`hide`	`("author" \| "thumbnail" \| "payout" \| "votes" \| "comments" \| "time")[]`	`[]`
`linkTarget`	`string`	`"https://blog.openhive.network"`
`className`	`string`	-

Examples

Variants

// Card (default)
<HivePostCard author="barddev" permlink="post" variant="card" />

// Compact
<HivePostCard author="barddev" permlink="post" variant="compact" />

// Grid
<HivePostCard author="barddev" permlink="post" variant="grid" />

Hide elements

// Hide specific elements
<HivePostCard
  author="barddev"
  permlink="my-post"
  hide={["author", "thumbnail", "payout"]}
/>

// Available options: "author" | "thumbnail" | "payout" | "votes" | "comments" | "time"

Custom styling

// Custom styling with className
<HivePostCard
  author="barddev"
  permlink="my-post"
  className="max-w-xl shadow-lg rounded-2xl"
/>

Render post list

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

// Render a list of posts
function PostList({ posts }: { posts: Array<{ author: string; permlink: string }> }) {
  return (
    <div className="space-y-4">
      {posts.map((post) => (
        <HivePostCard
          key={`${post.author}/${post.permlink}`}
          author={post.author}
          permlink={post.permlink}
        />
      ))}
    </div>
  );
}

Manabar Post List