Skip to main content

Introduction

Installation​

npm i react-threads-card

or

yarn add react-threads-card

Importing​

import ThreadsCard from 'react-threads-card';
import 'react-threads-card/style.css';

Basic setup​

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

Live Editor
<ThreadsCard
  author={{
    username: 'angeline_nieves',
    image: 'img/angelina_nieves.jpg',
    verified: false, // optional, but try setting it to true!
  }}
  text="every cat is a little celebrity to me"
  time={new Date('2024-05-05T18:43:00Z')}
  engagement={{
    likes: 1155,
    reposts: 258,
    replies: 13,
  }}
  permalink="https://www.threads.net/@angelina_nieves/post/C6mHlnfO3Dv" // 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
<ThreadsCard
  author={{
    username: 'samreich',
    image: 'img/samreich.jpg',
    verified: true,
  }}
  text="that's a wrap on game changer season 7"
  images={[
    { src: 'img/season7.jpg' },
    { src: 'img/season7.jpg' },
    { src: 'img/season7.jpg' },
  ]}
  time={new Date('2024-11-14T17:01:00Z')}
  engagement={{
    likes: 3900,
    reposts: 55,
    replies: 92,
  }}
  permalink="https://www.threads.net/@samreich/post/DCXAMJxTPOO"
/>
Result
Loading...

Server-side rendering​

React Threads 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.