React UI Components

npm install @outstand-so/ui

yarn add @outstand-so/ui

pnpm add @outstand-so/ui

import { OutstandProvider } from '@outstand-so/ui';

function App() {
	return (
		<OutstandProvider apiKey="your-api-key" baseUrl="https://api.outstand.so">
			{/* Your app components */}
		</OutstandProvider>
	);
}

import { ConnectAccountButton } from '@outstand-so/ui';

<ConnectAccountButton
	network="x"
	redirectUri="https://yourapp.com/callback"
	apiKey="your-api-key"
	onSuccess={(authUrl) => {
		window.location.href = authUrl;
	}}
	onError={(error) => {
		console.error('Connection error:', error);
	}}
/>

import { ConnectAccountButtonGroup } from '@outstand-so/ui';

<ConnectAccountButtonGroup
	networks={['x', 'linkedin', 'instagram', 'facebook']}
	redirectUri="https://yourapp.com/callback"
	apiKey="your-api-key"
	layout="grid"
	variant="outline"
/>

import { AccountsList } from '@outstand-so/ui';

<AccountsList
	apiKey="your-api-key"
	onAccountSelect={(account) => {
		console.log('Selected:', account);
	}}
	onAccountDisconnect={(accountId) => {
		console.log('Disconnected:', accountId);
	}}
	pageSize={20}
/>

import { AccountCard } from '@outstand-so/ui';

<AccountCard
	account={account}
	onSelect={() => handleSelect(account)}
	onDisconnect={() => handleDisconnect(account.id)}
/>

import { CreatePostForm } from '@outstand-so/ui';

<CreatePostForm
	apiKey="your-api-key"
	enableScheduling={true}
	enableDrafts={true}
	onPostCreated={(post) => {
		console.log('Post created:', post);
	}}
	onError={(error) => {
		console.error('Error:', error);
	}}
/>

import { PostComposer } from '@outstand-so/ui';

<PostComposer
	value={postContent}
	onChange={setPostContent}
	selectedAccounts={selectedAccounts}
	placeholder="What's on your mind?"
	maxLength={5000}
/>

import { NetworkSelector } from '@outstand-so/ui';

<NetworkSelector
	accounts={accounts}
	selectedIds={selectedAccountIds}
	onChange={setSelectedAccountIds}
/>

import { PostScheduler } from '@outstand-so/ui';

<PostScheduler
	value={scheduledDate}
	onChange={setScheduledDate}
	minDate={new Date()}
	maxDays={30}
/>

import { NetworkConfigPanel } from '@outstand-so/ui';

<NetworkConfigPanel
	networks={['instagram', 'youtube', 'tiktok']}
	configs={networkConfigs}
	onChange={setNetworkConfigs}
/>

import { MediaUploader } from '@outstand-so/ui';

<MediaUploader
	apiKey="your-api-key"
	onUploadComplete={(media) => {
		console.log('Uploaded:', media);
	}}
	onUploadError={(error) => {
		console.error('Upload error:', error);
	}}
	maxFiles={10}
	acceptedTypes={['image/*', 'video/*']}
/>

import { MediaPreview } from '@outstand-so/ui';

<MediaPreview
	media={mediaFile}
	onRemove={() => handleRemove(mediaFile.id)}
	progress={uploadProgress}
/>

import { MediaGallery } from '@outstand-so/ui';

<MediaGallery
	media={mediaFiles}
	onRemove={(index) => {
		setMediaFiles(prev => prev.filter((_, i) => i !== index));
	}}
	columns={3}
/>

import { PostMetrics } from '@outstand-so/ui';

<PostMetrics
	apiKey="your-api-key"
	postId="post-id"
	refreshInterval={30000}
/>

import { PostMetricsCard } from '@outstand-so/ui';

<PostMetricsCard
	account={account}
	metrics={metricsData}
	platformPostId="123456789"
	publishedAt="2025-01-15T10:30:00Z"
/>

import { PostsWithMetrics } from '@outstand-so/ui';

<PostsWithMetrics
	apiKey="your-api-key"
	socialAccountId="account-id"
	pageSize={10}
/>

import { OAuthCallback } from '@outstand-so/ui';

<OAuthCallback
	apiKey="your-api-key"
	onSuccess={(accounts) => {
		console.log('Connected accounts:', accounts);
	}}
	onError={(error) => {
		console.error('Connection error:', error);
	}}
/>

import { PageSelector } from '@outstand-so/ui';

<PageSelector
	network="facebook"
	pages={availablePages}
	onSelect={(selectedIds) => {
		console.log('Selected pages:', selectedIds);
	}}
	isLoading={false}
/>

import { useOutstand } from '@outstand-so/ui';

function MyComponent() {
	const { accounts, selectedAccounts, setSelectedAccounts, isLoading } = useOutstand();
	
	return (
		<div>
			{accounts.map(account => (
				<div key={account.id}>{account.username}</div>
			))}
		</div>
	);
}

import { useOutstandApi } from '@outstand-so/ui';

function MyComponent() {
	const api = useOutstandApi({ apiKey: 'your-api-key' });
	
	const fetchAccounts = async () => {
		const response = await api.get('/v1/social-accounts');
		if (response.success) {
			console.log('Accounts:', response.data);
		}
	};
	
	return <button onClick={fetchAccounts}>Fetch Accounts</button>;
}

import { useAccounts } from '@outstand-so/ui';

function AccountsComponent() {
	const {
		accounts,
		total,
		isLoading,
		error,
		refetch,
		disconnectAccount,
		hasNextPage,
		hasPrevPage
	} = useAccounts({
		apiKey: 'your-api-key',
		limit: 20,
		offset: 0
	});
	
	return (
		<div>
			{accounts.map(account => (
				<div key={account.id}>
					{account.username}
					<button onClick={() => disconnectAccount(account.id)}>
						Disconnect
					</button>
				</div>
			))}
		</div>
	);
}

import { usePosts } from '@outstand-so/ui';

function PostsComponent() {
	const {
		posts,
		total,
		isLoading,
		error,
		refetch,
		createPost,
		deletePost,
		hasNextPage,
		hasPrevPage
	} = usePosts({
		apiKey: 'your-api-key',
		socialAccountId: 'account-id',
		limit: 10
	});
	
	const handleCreate = async () => {
		const response = await createPost({
			content: 'Hello world!',
			accounts: ['account-id']
		});
		if (response.success) {
			console.log('Post created:', response.data);
		}
	};
	
	return (
		<div>
			<button onClick={handleCreate}>Create Post</button>
			{posts.map(post => (
				<div key={post.id}>
					{post.containers[0]?.content}
					<button onClick={() => deletePost(post.id)}>Delete</button>
				</div>
			))}
		</div>
	);
}

import { usePostMetrics } from '@outstand-so/ui';

function MetricsComponent({ postId }: { postId: string }) {
	const {
		analytics,
		isLoading,
		error,
		refetch
	} = usePostMetrics({
		apiKey: 'your-api-key',
		postId,
		refreshInterval: 30000
	});
	
	if (isLoading) return <div>Loading...</div>;
	if (error) return <div>Error: {error.message}</div>;
	
	return (
		<div>
			<p>Total Likes: {analytics?.aggregated_metrics.total_likes}</p>
			<p>Total Views: {analytics?.aggregated_metrics.total_views}</p>
		</div>
	);
}

import { useMediaUpload } from '@outstand-so/ui';

function UploadComponent() {
	const {
		uploadFile,
		uploadFiles,
		getUploadUrl,
		isUploading,
		uploadProgress
	} = useMediaUpload({
		apiKey: 'your-api-key'
	});
	
	const handleUpload = async (file: File) => {
		const mediaFile = await uploadFile(file);
		if (mediaFile) {
			console.log('Uploaded:', mediaFile);
		}
	};
	
	return (
		<div>
			<input
				type="file"
				onChange={(e) => {
					const file = e.target.files?.[0];
					if (file) handleUpload(file);
				}}
			/>
			{isUploading && <div>Uploading... {uploadProgress[file.name]}%</div>}
		</div>
	);
}

import { useOAuthFlow } from '@outstand-so/ui';

function OAuthComponent() {
	const {
		getAuthUrl,
		getPendingConnection,
		finalizeConnection,
		isLoading
	} = useOAuthFlow({
		apiKey: 'your-api-key'
	});
	
	const handleConnect = async () => {
		const response = await getAuthUrl('x', 'https://yourapp.com/callback');
		if (response.success && response.data) {
			window.location.href = response.data.auth_url;
		}
	};
	
	return (
		<button onClick={handleConnect} disabled={isLoading}>
			Connect X Account
		</button>
	);
}

import type {
	SocialAccount,
	SocialNetwork,
	Post,
	PostContainer,
	PostSocialAccount,
	MediaFile,
	PostAnalytics,
	PostMetricsData,
	CreatePostRequest,
	ApiResponse,
	PaginatedResponse,
	// ... and more
} from '@outstand-so/ui';

import {
	OutstandProvider,
	CreatePostForm,
	AccountsList
} from '@outstand-so/ui';

function PostManager() {
	return (
		<OutstandProvider apiKey="your-api-key">
			<div>
				<h2>Connected Accounts</h2>
				<AccountsList apiKey="your-api-key" />
				
				<h2>Create Post</h2>
				<CreatePostForm
					apiKey="your-api-key"
					enableScheduling={true}
					onPostCreated={(post) => {
						alert(`Post created: ${post.id}`);
					}}
				/>
			</div>
		</OutstandProvider>
	);
}

import {
	OutstandProvider,
	PostComposer,
	NetworkSelector,
	MediaUploader,
	PostScheduler,
	NetworkConfigPanel,
	useAccounts
} from '@outstand-so/ui';

function CustomPostCreator() {
	const { accounts } = useAccounts({ apiKey: 'your-api-key' });
	const [content, setContent] = useState('');
	const [selectedIds, setSelectedIds] = useState<string[]>([]);
	const [media, setMedia] = useState<MediaFile[]>([]);
	const [scheduledAt, setScheduledAt] = useState<Date | null>(null);
	
	const handleSubmit = async () => {
		// Use usePosts hook to create post
		// ...
	};
	
	return (
		<div>
			<PostComposer
				value={content}
				onChange={setContent}
				selectedAccounts={accounts.filter(a => selectedIds.includes(a.id))}
			/>
			<NetworkSelector
				accounts={accounts}
				selectedIds={selectedIds}
				onChange={setSelectedIds}
			/>
			<MediaUploader
				apiKey="your-api-key"
				onUploadComplete={setMedia}
			/>
			<PostScheduler
				value={scheduledAt}
				onChange={setScheduledAt}
			/>
			<NetworkConfigPanel
				networks={[...new Set(accounts.filter(a => selectedIds.includes(a.id)).map(a => a.network))]}
				configs={{}}
				onChange={() => {}}
			/>
			<button onClick={handleSubmit}>Create Post</button>
		</div>
	);
}

import { PostMetrics, PostsWithMetrics } from '@outstand-so/ui';

function AnalyticsDashboard() {
	const [selectedPostId, setSelectedPostId] = useState<string | null>(null);
	
	return (
		<div>
			{selectedPostId ? (
				<PostMetrics
					apiKey="your-api-key"
					postId={selectedPostId}
					refreshInterval={30000}
				/>
			) : (
				<PostsWithMetrics
					apiKey="your-api-key"
					pageSize={10}
				/>
			)}
		</div>
	);
}