Gathering detailed insights and metrics for bluesky-embed-react
Gathering detailed insights and metrics for bluesky-embed-react
Gathering detailed insights and metrics for bluesky-embed-react
Gathering detailed insights and metrics for 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.
React component to embed bluesky posts, profiles and feeds
npm install bluesky-embed-react
Typescript
Module System
Node Version
NPM Version
63.8
Supply Chain
91.5
Quality
80.5
Maintenance
100
Vulnerability
99.6
License
TypeScript (95.81%)
JavaScript (3.92%)
CSS (0.27%)
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Total Downloads
957
Last Day
36
Last Week
38
Last Month
175
Last Year
957
MIT License
1 Stars
110 Commits
1 Watchers
12 Branches
1 Contributors
Updated on Dec 15, 2024
Minified
Minified + Gzipped
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
Cumulative downloads
Total Downloads
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
2
Lightweight configurable React component for embedding posts, profiles and feeds from Bluesky.
Bluesky Embed React is an independent project, not affiliated with Bluesky.
https://etherington.xyz/bluesky-embed-react
1npm install bluesky-embed-react
or
1yarn add bluesky-embed-react
1import { 2 BlueskyPost, 3 BlueskyProfilePosts, 4 BlueskyConfigProvider, 5} from "bluesky-embed-react";
1<BlueskyPost userHandle="bsky.app" postId="3l6oveex3ii2l" />
For instance, in the post https://bsky.app/profile/bsky.app/post/3l3t5pvpm222b
the userHandle
is "bsky.app" and the postId
is "3l3t5pvpm222b".
1<BlueskyProfilePosts userHandle="bsky.app" />
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:
https://bsky.app
)https://public.api.bsky.app
)false
)42
)false
)false
)light-dark(#0b0f14, #f1f3f5)
)light-dark(#42576c, #aebbc9)
)light-dark(#1083fe, #208bfe)
)light-dark(#fff, #161e27)
)light-dark(#d4dbe2, #2e4052)
)linear-gradient(100deg, light-dark(#d5d5d5, #aaa) 40%, light-dark(#dbdbdb, #bdbdbd) 50%, light-dark(#d5d5d5, #aaa) 60%)
)InterVariable, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"
)15px
)14px
)400
)600
)140%
)8px
)6px
)600px
)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).
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};
MIT © oetherington. See the included COPYING file for details.
No vulnerabilities found.
No security vulnerabilities found.