InstagramEmbed

Embeds Instagram posts and reels in MDX articles. Supports post (/p/) and reel (/reel/) URL formats, URL validation for instagram.com, lazy loading for performance.

Article Media & Embeds

Default

URL

Reel post

With className

Multiple embeds

import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { InstagramEmbed } from './instagram-embed'; const meta: StoryMeta = { title: 'InstagramEmbed', category: 'Article Media & Embeds', description: 'Embeds Instagram posts and reels in MDX articles. Supports post (/p/) and reel (/reel/) URL formats, URL validation for instagram.com, lazy loading for performance.', usage: `import { InstagramEmbed } from '@/components/mdx/instagram-embed';\n\n<InstagramEmbed url="https://www.instagram.com/p/DUlkwjdDdQS/" />`, }; export default meta; /** * Default - Standard Instagram post URL * * Uses the standard instagram.com/p/ format */ export const Default = defineStory<Parameters<typeof InstagramEmbed>[0]>({ name: 'Default', controls: [ { type: 'text', prop: 'url', label: 'URL', defaultValue: 'https://www.instagram.com/p/DUlkwjdDdQS/', }, ], render: ({ url = 'https://www.instagram.com/p/DUlkwjdDdQS/' } = {}) => ( <InstagramEmbed url={url} /> ), }); /** Reel post format (/reel/) */ export const ReelPost = defineStory({ name: 'Reel post', render: () => <InstagramEmbed url="https://www.instagram.com/reel/DUlkwjdDdQS/" />, }); /** With custom className */ export const WithClassName = defineStory({ name: 'With className', render: () => ( <InstagramEmbed url="https://www.instagram.com/p/DUlkwjdDdQS/" className="border-2 border-zd-link" /> ), }); /** Multiple embeds in sequence */ export const MultipleEmbeds = defineStory({ name: 'Multiple embeds', render: () => ( <div className="max-w-[800px]"> <h3 className="text-zd-white pb-vgap-sm">Instagram 投稿</h3> <InstagramEmbed url="https://www.instagram.com/p/DUlkwjdDdQS/" /> <h3 className="text-zd-white pb-vgap-sm">Instagram リール</h3> <InstagramEmbed url="https://www.instagram.com/reel/DUlkwjdDdQS/" /> </div> ), });