Social Share Image with Preview

ProNew

Upload a share image, check the recommended 1200 by 630 shape and size, and see it inside a mock social card with the page title and description, trimmed like real previews; warns when text will be cut. Use this when sharing previews matter for links.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

domain

Guide and examples

When to use it

Pages need an image for link previews (Open Graph, Twitter cards) and editors should see the result before publishing.

Do not use it when: For general image editing, use a cropper.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`domain`	`string`	`example.com`	Shown above the title in the card.
`measure`	`(file) => Promise<{ width, height }>`	decode with `Image`	Replace for SVG.
`onChange`	`({ title, description, image }) => void`	-	After an image is chosen.

ogProblems(size, bytes) and clip(text, max) are exported.

Accessibility

The preview is a labelled region; the image has alt text, and the title and description counters are text with the limit, turning into a sentence when exceeded ("the end will be cut in previews").
Image problems are an alert list with the real dimensions; a good image gets a status line. The choose button changes its label to Replace.
The preview shows trimmed text the way networks do, so editors see the cut before publishing.

Testing

The pattern ships with a Testing Library test (og-image-preview-card.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

Pages need an image for link previews (Open Graph, Twitter cards) and editors should see the result before publishing.

Do not use it when: For general image editing, use a cropper.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`domain`	`string`	`example.com`	Shown above the title in the card.
`measure`	`(file) => Promise<{ width, height }>`	decode with `Image`	Replace for SVG.
`onChange`	`({ title, description, image }) => void`	-	After an image is chosen.

ogProblems(size, bytes) and clip(text, max) are exported.

Accessibility

The preview is a labelled region; the image has alt text, and the title and description counters are text with the limit, turning into a sentence when exceeded ("the end will be cut in previews").
Image problems are an alert list with the real dimensions; a good image gets a status line. The choose button changes its label to Replace.
The preview shows trimmed text the way networks do, so editors see the cut before publishing.

Testing

The pattern ships with a Testing Library test (og-image-preview-card.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.