Skip to main content

Introduction

Installation​

npm i react-bluesky-card

or

yarn add react-bluesky-card

Importing​

import BlueskyCard from 'react-bluesky-card';
import 'react-bluesky-card/style.css';

Basic setup​

Here's how to set up a card with basic information:

Live Editor
<BlueskyCard
  author={{
    name: 'GM Connie Chang 🌈🐸',
    username: 'byconniechang.bsky.social',
    image: 'img/byconniechang.jpg',
  }}
  text="Soooo how are y’all pronouncing “bsky” in your heads, because it’s “bisky” to me (like a biscuit)"
  time={new Date('2024-11-12T10:31:00Z')}
  engagement={{
    likes: 200,
    reposts: 15,
    replies: 57,
  }}
  permalink="https://bsky.app/profile/byconniechang.bsky.social/post/3larv6imprc2y" // optional
/>
Result
Loading...

Adding images​

You can add images to a post by using the images prop. You have to pass in an array of objects that have a src property with the URL to your images. A maximum of 4 images is allowed within a post.

Live Editor
<BlueskyCard
  author={{
    name: 'matt klinman',
    username: 'mattklinman.bsky.social',
    image: 'img/mattklinman.jpg',
  }}
  text="wednesday night, time to sterilize my toilet paper for the rest of the week"
  images={[
    { src: 'img/toiletpaper.jpg' },
    { src: 'img/toiletpaper.jpg' },
    { src: 'img/toiletpaper.jpg' },
  ]}
  time={new Date('2024-11-28T01:35:00Z')}
  engagement={{
    likes: 4,
    reposts: 0,
    replies: 0,
  }}
  permalink="https://bsky.app/profile/mattklinman.bsky.social/post/3lbxwfvkk4k2q"
/>
Result
Loading...

Server-side rendering​

React Bluesky Card can only be rendered on the client side as it loads its CSS directly into the DOM. To make it work with SSR, try importing the package dynamically.