A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.
40
fork

Configure Feed

Select the types of activity you want to include in your feed.

add documentation that atcute records can be passed directly to components

+81 -2
+35
README.md
··· 111 111 <LeafletDocument did={did} rkey={rkey} record={documentRecord} /> 112 112 ``` 113 113 114 + ### Using atcute Directly 115 + 116 + Use atcute directly to construct records and pass them to components—fully compatible! 117 + 118 + ```tsx 119 + import { Client, simpleFetchHandler, ok } from '@atcute/client'; 120 + import type { AppBskyFeedPost } from '@atcute/bluesky'; 121 + import { BlueskyPost } from 'atproto-ui'; 122 + 123 + // Create atcute client 124 + const client = new Client({ 125 + handler: simpleFetchHandler({ service: 'https://public.api.bsky.app' }) 126 + }); 127 + 128 + // Fetch a record 129 + const data = await ok( 130 + client.get('com.atproto.repo.getRecord', { 131 + params: { 132 + repo: 'did:plc:ttdrpj45ibqunmfhdsb4zdwq', 133 + collection: 'app.bsky.feed.post', 134 + rkey: '3m45rq4sjes2h' 135 + } 136 + }) 137 + ); 138 + 139 + const record = data.value as AppBskyFeedPost.Main; 140 + 141 + // Pass atcute record directly to component! 142 + <BlueskyPost 143 + did="did:plc:ttdrpj45ibqunmfhdsb4zdwq" 144 + rkey="3m45rq4sjes2h" 145 + record={record} 146 + /> 147 + ``` 148 + 114 149 ## API Reference 115 150 116 151 ### Components
+44 -1
src/App.tsx
··· 1 1 import React, { useState, useCallback, useRef } from "react"; 2 2 import { AtProtoProvider } from "../lib"; 3 - import "../lib/styles.css" 3 + import "../lib/styles.css"; 4 4 import "./App.css"; 5 5 6 6 import { TangledString } from "../lib/components/TangledString"; ··· 42 42 // Pass prefetched record—BlueskyPost won't re-fetch it 43 43 return <BlueskyPost did={did} rkey={rkey} record={record} />; 44 44 };`; 45 + 46 + const atcuteUsageSnippet = `import { Client, simpleFetchHandler, ok } from '@atcute/client'; 47 + import type { AppBskyFeedPost } from '@atcute/bluesky'; 48 + import { BlueskyPost } from 'atproto-ui'; 49 + 50 + // Create atcute client 51 + const client = new Client({ 52 + handler: simpleFetchHandler({ service: 'https://public.api.bsky.app' }) 53 + }); 54 + 55 + // Fetch a record 56 + const data = await ok( 57 + client.get('com.atproto.repo.getRecord', { 58 + params: { 59 + repo: 'did:plc:ttdrpj45ibqunmfhdsb4zdwq', 60 + collection: 'app.bsky.feed.post', 61 + rkey: '3m45rq4sjes2h' 62 + } 63 + }) 64 + ); 65 + 66 + const record = data.value as AppBskyFeedPost.Main; 67 + 68 + // Pass atcute record directly to component! 69 + <BlueskyPost 70 + did="did:plc:ttdrpj45ibqunmfhdsb4zdwq" 71 + rkey="3m45rq4sjes2h" 72 + record={record} 73 + />`; 45 74 46 75 const codeBlockBase: React.CSSProperties = { 47 76 fontFamily: 'Menlo, Consolas, "SFMono-Regular", ui-monospace, monospace', ··· 460 489 style={codeTextStyle} 461 490 > 462 491 {prefetchedDataSnippet} 492 + </code> 493 + </pre> 494 + <p 495 + style={{ 496 + color: `var(--demo-text-secondary)`, 497 + margin: "16px 0 8px", 498 + }} 499 + > 500 + Use atcute directly to construct records and pass them to 501 + components—fully compatible! 502 + </p> 503 + <pre style={codeBlockStyle}> 504 + <code className="language-tsx" style={codeTextStyle}> 505 + {atcuteUsageSnippet} 463 506 </code> 464 507 </pre> 465 508 </section>
+2 -1
tsconfig.lib.json
··· 18 18 "declarationDir": "dist-lib", 19 19 "sourceMap": true, 20 20 "outDir": "./lib-dist", 21 - "rootDir": "./lib" 21 + "rootDir": "./lib", 22 + "types": ["@atcute/bluesky"] 22 23 }, 23 24 "include": ["lib/**/*.ts", "lib/**/*.tsx"] 24 25 }