A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.
add documentation that atcute records can be passed directly to components
+81
-2
+35
README.md
+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
+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>