Social Media Previews

A React component library for rendering social media platform previews. Perfect for social media management tools, content scheduling apps, or any application that needs to show how posts will appear across different platforms.

> 🎨 Try it live: See these components in action at Social Mocker - a free web app that lets you create pixel-perfect social media post mockups with customizable content and export them as high-resolution images.

Features

- 🎨 Multi-platform support: Facebook, Twitter, Instagram, LinkedIn, and Bluesky
- 🌓 Theme support: Light and dark modes for all platforms
- 📱 Responsive design: Optimized layouts that match each platform's design
- 🔧 TypeScript ready: Full TypeScript support with type definitions
- 🎯 Zero dependencies: Only requires React as a peer dependency
- ⚡ Lightweight: Minimal bundle size with tree-shaking support

Installation

``bash
npm install social-media-previews
`

Platform Previews

| Platform | Light Mode | dark Mode |
|----------|------------| ------------|
| Facebook | | |
| Twitter/X | | |
| Instagram | | |
| LinkedIn | | |
| Bluesky | | |

Quick Start

The primary way to use this library is through the SocialMediaPreview component:

`tsx
import { SocialMediaPreview, FacebookFormValues } from 'social-media-previews';

const MyComponent = () => {
const facebookData: FacebookFormValues = {
fullName: "John Doe",
postText: "Check out this amazing content!",
profilePicture: "https://example.com/avatar.jpg",
postImages: ["https://example.com/image1.jpg"],
likeCount: 42,
commentCount: 8,
shareCount: 3,
timestamp: new Date().toISOString(),
verified: true
};

return (
platform="facebook"
theme="light"
values={facebookData}
/>
);
};
`

Props Documentation

$3

The main component accepts a discriminated union of props based on the platform:

| Prop | Type | Description |
|------|------|-------------|
| platform | "facebook" \| "twitter" \| "instagram" \| "linkedin" \| "bluesky" | The social media platform to render |
| theme | "light" \| "dark" | The theme mode for the preview |
| values | Platform-specific values object | Data to display in the preview |

$3

#### FacebookFormValues
| Property | Type | Required | Default | Description |
|----------|------|----------|---------|-------------|
| fullName | string | ✅ | - | User's display name |
| postText | string | ❌ | - | The post content text |
| profilePicture | string | ❌ | - | URL to profile picture |
| postImages | string[] | ❌ | - | Array of image URLs |
| likeCount | number | ❌ | 0 | Number of likes |
| commentCount | number | ❌ | 0 | Number of comments |
| shareCount | number | ❌ | 0 | Number of shares |
| viewCount | number | ❌ | 0 | Number of views |
| timestamp | string | ❌ | Current time | ISO timestamp |
| verified | boolean | ❌ | true | Verification badge |

#### TwitterFormValues
| Property | Type | Required | Default | Description |
|----------|------|----------|---------|-------------|
| displayName | string | ✅ | - | User's display name |
| handle | string | ✅ | - | Twitter handle (must start with @) |
| tweetText | string | ✅ | - | The tweet content |
| profilePicture | string | ❌ | - | URL to profile picture |
| postImages | string[] | ❌ | - | Array of image URLs |
| likeCount | number | ❌ | 0 | Number of likes |
| commentCount | number | ❌ | 0 | Number of replies |
| retweetCount | number | ❌ | 0 | Number of retweets |
| viewCount | number | ❌ | 0 | Number of views |
| timestamp | string | ❌ | Current time | ISO timestamp |
| verified | boolean | ❌ | true | Verification badge |

#### InstagramFormValues
| Property | Type | Required | Default | Description |
|----------|------|----------|---------|-------------|
| username | string | ✅ | - | Instagram username |
| fullName | string | ✅ | - | User's full name |
| caption | string | ❌ | - | Post caption |
| location | string | ❌ | - | Location tag |
| profilePicture | string | ❌ | - | URL to profile picture |
| postImages | string[] | ❌ | - | Array of image URLs |
| likeCount | number | ❌ | 0 | Number of likes |
| commentCount | number | ❌ | 0 | Number of comments |
| timestamp | string | ❌ | Current time | ISO timestamp |
| verified | boolean | ❌ | true | Verification badge |

#### LinkedInFormValues
| Property | Type | Required | Default | Description |
|----------|------|----------|---------|-------------|
| fullName | string | ✅ | - | User's full name |
| headline | string | ❌ | - | Professional headline |
| postText | string | ✅ | - | Post content |
| profilePicture | string | ❌ | - | URL to profile picture |
| postImages | string[] | ❌ | - | Array of image URLs |
| likeCount | number | ❌ | 0 | Number of likes |
| commentCount | number | ❌ | 0 | Number of comments |
| repostCount | number | ❌ | 0 | Number of reposts |
| timestamp | string | ❌ | Current time | ISO timestamp |
| verified | boolean | ❌ | true | Verification badge |

#### BlueskyFormValues
| Property | Type | Required | Default | Description |
|----------|------|----------|---------|-------------|
| displayName | string | ✅ | - | User's display name |
| handle | string | ✅ | - | Bluesky handle |
| postText | string | ✅ | - | Post content |
| profilePicture | string | ❌ | - | URL to profile picture |
| postImages | string[] | ❌ | - | Array of image URLs |
| likeCount | number | ❌ | 0 | Number of likes |
| commentCount | number | ❌ | 0 | Number of replies |
| repostCount | number | ❌ | 0 | Number of reposts |
| shareCount | number | ❌ | 0 | Number of shares |
| timestamp | string | ❌ | Current time | ISO timestamp |
| verified | boolean | ❌ | true | Verification badge |

Using Individual Platform Components

While SocialMediaPreview is the recommended approach, you can also import and use individual platform components:

`tsx
import {
FacebookPreview,
TwitterPreview,
InstagramPreview,
LinkedInPreview,
BlueskyPreview,
type FacebookFormValues
} from 'social-media-previews';

// Using individual components
const MyFacebookPreview = () => {
const data: FacebookFormValues = {
fullName: "John Doe",
postText: "Hello World!"
};

return ;
};

const MyTwitterPreview = () => {
const data: TwitterFormValues = {
displayName: "John Doe",
handle: "@johndoe",
tweetText: "Hello Twitter!"
};

return ;
};
`

Examples

$3

`tsx
import { SocialMediaPreview } from 'social-media-previews';
import type {
FacebookFormValues,
TwitterFormValues,
InstagramFormValues
} from 'social-media-previews';

// Facebook Example
const facebookPost: FacebookFormValues = {
fullName: "Tech Company",
postText: "We're excited to announce our new product launch! 🚀",
likeCount: 156,
commentCount: 24,
shareCount: 8,
verified: true
};

// Twitter Example
const tweet: TwitterFormValues = {
displayName: "Tech Company",
handle: "@techcompany",
tweetText: "Just shipped a major update to our platform! Here's what's new:",
likeCount: 89,
retweetCount: 34,
commentCount: 12
};

// Instagram Example
const instagramPost: InstagramFormValues = {
username: "techcompany",
fullName: "Tech Company",
caption: "Behind the scenes at our office 📸 #techlife #innovation",
location: "San Francisco, CA",
likeCount: 234,
commentCount: 18
};

const App = () => {
return (



);
};
`

$3

`tsx
const postWithImages: FacebookFormValues = {
fullName: "Travel Blogger",
postText: "Amazing sunset from my latest adventure! 🌅",
postImages: [
"https://example.com/sunset1.jpg",
"https://example.com/sunset2.jpg",
"https://example.com/sunset3.jpg"
],
likeCount: 89,
commentCount: 15,
profilePicture: "https://example.com/profile.jpg"
};

platform="facebook"
theme="light"
values={postWithImages}
/>
`

TypeScript Support

The library is written in TypeScript and provides full type support:

`tsx
import type {
GeneralPreviewProps,
FacebookFormValues,
TwitterFormValues,
InstagramFormValues,
LinkedInFormValues,
BlueskyFormValues
} from 'social-media-previews';

// Type-safe platform switching
const renderPreview = (platform: string, data: any) => {
switch (platform) {
case 'facebook':
return ;
case 'twitter':
return ;
// ... other platforms
}
};
``

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - See LICENSE file for details.