A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.
nekomimi.pet
1import React from 'react';
2import { useAtProtoRecord } from '../hooks/useAtProtoRecord';
3
4export interface AtProtoRecordProps<T = unknown> {
5 did: string;
6 collection: string;
7 rkey: string;
8 renderer?: React.ComponentType<{ record: T; loading: boolean; error?: Error }>;
9 fallback?: React.ReactNode;
10 loadingIndicator?: React.ReactNode;
11}
12
13export function AtProtoRecord<T = unknown>({ did, collection, rkey, renderer: Renderer, fallback = null, loadingIndicator = 'Loading…' }: AtProtoRecordProps<T>) {
14 const { record, error, loading } = useAtProtoRecord<T>({ did, collection, rkey });
15
16 if (error) return <>{fallback}</>;
17 if (!record) return <>{loading ? loadingIndicator : fallback}</>;
18 if (Renderer) return <Renderer record={record} loading={loading} error={error} />;
19 return <pre style={{ fontSize: 12, padding: 8, background: '#f5f5f5', overflow: 'auto' }}>{JSON.stringify(record, null, 2)}</pre>;
20}