React component to embed bluesky posts, profiles and feeds
Installations
npm install bluesky-embed-react
Developer Guide
Typescript
Yes
Module System
CommonJS
Node Version
22.6.0
NPM Version
10.8.2
Score
63.8
Supply Chain
91.5
Quality
80.5
Maintenance
100
Vulnerability
99.6
License
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
TypeScript (95.81%)
JavaScript (3.92%)
CSS (0.27%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
Download Statistics
Total Downloads
957
Last Day
36
Last Week
38
Last Month
175
Last Year
957
GitHub Statistics
MIT License
1 Stars
110 Commits
1 Watchers
12 Branches
1 Contributors
Updated on Dec 15, 2024
Bundle Size
697.21 kB
Minified
129.37 kB
Minified + Gzipped
Package Meta Information
Latest Version
0.0.8
Package Id
bluesky-embed-react@0.0.8
Unpacked Size
194.95 kB
Size
53.42 kB
File Count
9
NPM Version
10.8.2
Node Version
22.6.0
Published on
Dec 13, 2024
Total Downloads
Cumulative downloads
Total Downloads
957
Last Day
-36.8%
36
Compared to previous day
Last Week
-37.7%
38
Compared to previous week
Last Month
-7.4%
175
Compared to previous month
Last Year
0%
957
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Bluesky Embed React
Lightweight configurable React component for embedding posts, profiles and feeds from Bluesky.
Bluesky Embed React is an independent project, not affiliated with Bluesky.
Demo and Examples
https://etherington.xyz/bluesky-embed-react
Install
1npm install bluesky-embed-react
or
1yarn add bluesky-embed-react
Basic Usage
Importing
1import { 2 BlueskyPost, 3 BlueskyProfilePosts, 4 BlueskyConfigProvider, 5} from "bluesky-embed-react";
Embed a post
1<BlueskyPost userHandle="bsky.app" postId="3l6oveex3ii2l" />
- 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
1<BlueskyProfilePosts userHandle="bsky.app" />
- 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
:
1<BlueskyConfigProvider hideAvatars> 2 <BlueskyPost userHandle="bsky.app" postId="3l6oveex3ii2l" /> 3</BlueskyConfigProvider>
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
light-dark(#0b0f14, #f1f3f5)
) - textSecondaryColor CSS color string for secondary text (default
light-dark(#42576c, #aebbc9)
) - anchorColor CSS color string for links (default
light-dark(#1083fe, #208bfe)
) - backgroundColor CSS color string for post backgrounds (default
light-dark(#fff, #161e27)
) - borderColor CSS color string for borders (default
light-dark(#d4dbe2, #2e4052)
) - loadingShimmer CSS color string for the loading shimmer effect (default
linear-gradient(100deg, light-dark(#d5d5d5, #aaa) 40%, light-dark(#dbdbdb, #bdbdbd) 50%, light-dark(#d5d5d5, #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
Switching between light mode and dark mode
The default colors use the CSS light-dark
color function
to automatically switch colors based on the current operating system setting.
To enable this behaviour you need to set the CSS color-scheme
property to
light dark
:
1:root { 2 color-scheme: light dark; 3}
You can also override the operating system to choose one theme or the other by
setting color-scheme
to either light
or dark
. If you don't set color-scheme
then the browser will default to the light theme, even if the user has set
their operating system to dark mode.
For more fine grained theme control you can set the color options manually
in a BlueskyConfig
provider (see above).
SSR
You can use the raw API to fetch data during SSR. For instance, in NextJS:
1import { 2 BlueskyPostsList, 3 getBlueskyClient, 4 getBlueskyProfilePosts, 5} from "bluesky-embed-react"; 6 7export default function Page({ profile, posts }) { 8 return <BlueskyPostsList profile={profile} posts={posts} />; 9} 10 11export const getStaticProps = async () => { 12 const client = getBlueskyClient(); 13 const [profile, posts] = await Promise.all([ 14 getBlueskyProfile(client, "bsky.app"), 15 getBlueskyProfilePosts(client, "bsky.app"), 16 ]); 17 return { 18 props: { 19 profile, 20 posts, 21 }, 22 }; 23};
License
MIT © oetherington. See the included COPYING file for details.

No vulnerabilities found.

No security vulnerabilities found.
Other packages similar to bluesky-embed-react
react-bluesky-embed
React Bluesky Embed allows you to embed post threads, profiles, and comments in your React application when using Next.js, Create React App, Vite, and more.
bluesky-comments
Embed Bluesky comments on your website
@hamstack/bluesky-embed-rsc
A React Server Component for embedding Bluesky posts.
bsky-react-post
Embed Bluesky (bsky) posts in your React application.