@linkforty/og-react

React component for og-preview.

import { OgPreview } from '@linkforty/og-react';

<OgPreview endpoint="/api/og-inspect" />;

The component owns the URL input, the request and the rendering. You supply an endpoint — a backend running inspect() from @linkforty/og-core — so you can host your own rather than depending on someone else's service.

Props

| Prop | Type | Notes | | --- | --- | --- | | endpoint | string | Required. Called as ${endpoint}?url=.... | | initialUrl | string | Pre-fills the input. | | className | string | Appended to the root element's class. |

Behaviour worth knowing

When every platform sees the same metadata the component stays quiet — one success line and a single set of card previews. When they disagree it leads with a banner naming the fields that differ, because that is the state no single-fetch tool can produce.

A platform blocked by a bot filter renders as a neutral note rather than an error, and is excluded from the divergence banner.

All metadata is rendered as React children and is therefore escaped. There is no dangerouslySetInnerHTML in this package, and og:image is rendered with a plain img — never through a framework image optimizer, which would re-serve arbitrary remote content from your own domain.

Styling is left to you: the component emits ogp-* class names and ships no CSS framework.

MIT