Social Media Post

Example

10s

Hello, world!

Usage

		<Post
	data={{
		author: {
			displayName: 'flo-bit',
			handle: 'flo-bit.dev',
			avatar: 'https://github.com/flo-bit.png',
			href: 'https://github.com/flo-bit'
		},
		createdAt: new Date().toISOString(),
		replyCount: 69,
		repostCount: 42,
		likeCount: 420
	}}
>
	Hello, world!
</Post>

API Reference

Post

A social media post component with avatar, text, images, video, quotes, and action buttons.

Property Type Description

data required

object

The post data including author info, text, images, video, timestamp, and engagement counts. See PostData type for full structure.

showAvatar

boolean

Whether to show the author avatar. Default: true

compact

boolean

Whether to use a compact layout. Default: false

showImages

boolean

Whether to show attached images. Default: true

showVideo

boolean

Whether to show attached video. Default: true

showExternal

boolean

Whether to show external link cards. Default: true

showQuotes

boolean

Whether to show quoted posts. Default: true

showReply $bindable

boolean

Whether to show the reply action button. Default: true

showRepost $bindable

boolean

Whether to show the repost action button. Default: true

showLike $bindable

boolean

Whether to show the like action button. Default: true

showBookmark $bindable

boolean

Whether to show the bookmark action button. Default: true

liked $bindable

boolean

Whether the post is liked. Default: false

bookmarked $bindable

boolean

Whether the post is bookmarked. Default: false

onReplyClick

function

Callback when the reply button is clicked. Default: —

onRepostClick

function

Callback when the repost button is clicked. Default: —

onLikeClick

function

Callback when the like button is clicked. Default: —

onBookmarkClick

function

Callback when the bookmark button is clicked. Default: —

onclickimage

function

Callback when a post image is clicked. Default: —

onclickpost

function

Callback when the post body is clicked. Default: —

onclickhandle

function

Callback when the author handle is clicked. Default: —

replyHref

string

URL for the reply action link. Default: —

repostHref

string

URL for the repost action link. Default: —

likeHref

string

URL for the like action link. Default: —

timestampHref

string

URL for the timestamp link. Default: —

ontimestampclick

function

Callback when the timestamp is clicked. Default: —

customActions

Snippet

Custom action buttons to display alongside the default actions. Default: —

logo

Snippet

Custom logo snippet displayed in the post header. Default: —

children

Snippet

Additional content rendered below the post. Default: —

class

string

Additional CSS classes to apply. Default: —

ref $bindable

HTMLElement

The underlying DOM element. Default: —

Property

data

showAvatar

compact

showImages

showVideo

showExternal

showQuotes

showReply

showRepost

showLike

showBookmark

liked

bookmarked

onReplyClick

onRepostClick

onLikeClick

onBookmarkClick

onclickimage

onclickpost

onclickhandle

replyHref

repostHref

likeHref

timestampHref

ontimestampclick

customActions

logo

children

class

ref