Using Behold with Preact

Add Instagram galleries to your Preact projects with our drop-in widget.

Behold Preact

Widget Component

Our official Preact component is a lightweight wrapper around our core web component, and let’s you easily add Behold Instagram widgets to your Preact code.

It has zero dependencies and is fully typed.


First, create a widget feed, and copy the feedId from your widget embed code. Next, install with your package manager of choice.

Terminal window
npm install @behold/preact
# or
pnpm add @behold/preact
# or
yarn add @behold/preact

After installing, simply import the component and use as normal.

import BeholdWidget from "@behold/preact"
function MyComponent() {
return <BeholdWidget feedId="YOUR_FEED_ID" />


The Behold Preact component has a single required property: feedId, which can be found by opening your feed in the Behold dashboard and clicking on Embed Code.

All configuration and customization is handled in the Behold admin. When you make changes there it will automatically update your widget, no code modifications required. Because of browser caching, changes can take a minute or two to show up. Clearing your cache and incognito/private windows will help.

Load event

You can optionally pass a callback function to the onLoad property, which will fire after initial render.

<BeholdWidget onLoad={() => console.log("Loaded!")} feedId="YOUR_FEED_ID" />

A note about SSR

This component relies on client-only APIs and won’t be pre-rendered by SSR or SSG. That means there will be a moment before it renders where its height will be 0px. You can prevent layout shifts this may cause by applying dimensions to a container element with CSS.

Ready to give it a try?

Sign up for free