Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oetherington/bluesky-embed-react
React component to embed bluesky posts, profiles and feeds
https://github.com/oetherington/bluesky-embed-react
at-protocol atproto atprotocol bluesky bluesky-client component embed react reactjs widgets
Last synced: about 1 month ago
JSON representation
React component to embed bluesky posts, profiles and feeds
- Host: GitHub
- URL: https://github.com/oetherington/bluesky-embed-react
- Owner: oetherington
- License: mit
- Created: 2024-11-24T12:51:47.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-11-24T18:23:47.000Z (about 1 month ago)
- Last Synced: 2024-11-24T19:19:07.029Z (about 1 month ago)
- Topics: at-protocol, atproto, atprotocol, bluesky, bluesky-client, component, embed, react, reactjs, widgets
- Language: TypeScript
- Homepage: https://etherington.xyz/bluesky-embed-react
- Size: 148 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: COPYING
Awesome Lists containing this project
README
# Bluesky Embed React
[](https://www.npmjs.com/package/bluesky-embed-react) [](https://etherington.xyz/bluesky-embed-react)  [](https://coveralls.io/github/oetherington/bluesky-embed-react?branch=main) [](https://raw.githubusercontent.com/oetherington/bluesky-embed-react/refs/heads/main/COPYING)
Lightweight configurable React component for embedding posts, profiles and feeds
from [Bluesky](https://bsky.app).
Bluesky Embed React is an independent project, not affiliated with Bluesky.
## Demo and Examples
https://etherington.xyz/bluesky-embed-react
## Install
```bash
npm install bluesky-embed-react
```
or
```bash
yarn add bluesky-embed-react
```
## Basic Usage
### Importing
```jsx
import {
BlueskyPost,
BlueskyProfilePosts,
BlueskyConfigProvider,
} from "bluesky-embed-react";
```
### Embed a post
```jsx
```
- **userHandle** The username or DID of the user who created the post
- **postId** The ID of the post to embed
For instance, in the post https://bsky.app/profile/bsky.app/post/3l3t5pvpm222b
the `userHandle` is "bsky.app" and the `postId` is "3l3t5pvpm222b".
### Embed a users profile feed
```jsx
```
- **userHandle** The username or DID of the user to embed
- **pageSize** The number of posts to display (and fetch if using infinite loading)
- **infiniteLoad** Enable inifite loading when scrolling to the end of the list
## Configuration
Advanced configuration can be done by wrapping the components in a
`BlueskyConfigProvider`:
```jsx
```
The props are of type `BlueskyConfig` which has the following properties:
- **app** The base URL to use for outward links (default `https://bsky.app`)
- **service** The base URL for the API (default `https://public.api.bsky.app`)
- **openLinksInNewTab** Open links in place or in a new tab (default `false`)
- **avatarSize** The size of user avatars in pixels (default `42`)
- **hideAvatars** Whether or not to hide user avatars (default `false`)
- **hideEmbeds** Whether or not to hide embedded media and links (default `false`)
- **textPrimaryColor** CSS color string for primary text (default `#f1f3f5`)
- **textSecondaryColor** CSS color string for secondary text (default `#aebbc9`)
- **backgroundColor** CSS color string for post backgrounds (default `#161e27`)
- **borderColor** CSS color string for borders (default `#2e4052`)
- **loadingShimmer** CSS color string for the loading shimmer effect (default `linear-gradient(100deg, #aaa 40%, #bdbdbd 50%, #aaa 60%)`)
- **fontFamily** CSS font stack to apply to all posts (default `InterVariable, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`)
- **fontSize** CSS font size for main text (default `15px`)
- **embedFontSize** CSS font size for embedded media descriptions (default `14px`)
- **fontWeight** CSS font weight for main text (default `400`)
- **titleFontWeight** CSS font weight for title text (default `600`)
- **lineHeight** CSS line height for all text (default `140%`)
- **grid** Grid size in pixels used for calculating all margins and padding (default `8px`)
- **borderRadius** CSS border radius applied to posts and loaders (default `6px`)
- **width** CSS width applied to posts (default `600px`)
- **formatShortDate** Function to format dates into a short format
- **formatLongDate** Function to format dates into a long format
## License
MIT © [oetherington](https://github.com/oetherington). See the included [COPYING](https://raw.githubusercontent.com/oetherington/bluesky-embed-react/refs/heads/main/COPYING) file for details.