react-threads
Embed Static Threads in your React/Next.js application. UI components for Meta’s Threads. Powered by junhoyeo/threads-api.
Demo
View Demo View Github
📦 Setup
First, install react-threads with it’s dependencies.
yarn add next react-threads threads-api yarn add -D tailwindcss postcss autoprefixer
Add path to react-threads to content sources of your Tailwind Configuration file(tailwind.config.js).
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{ts,tsx}',
// path to `react-threads`
'node_modules/react-threads/**/*',
],
};
Set images.remotePatterns to your app’s next.config.js. We use next/image to proxy images under the hood.
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '**.cdninstagram.com',
},
{
protocol: 'https',
hostname: '**.fbcdn.net',
},
],
},
};
module.exports = nextConfig;
🚀 Usage
import { GetStaticProps, NextPage } from 'next';
import { BannerCTA, Thread } from 'react-threads';
import { Thread as ThreadPost, ThreadsAPI } from 'threads-api';
const threadsAPI = new ThreadsAPI();
type Props = {
threadID: string;
thread: ThreadPost;
};
export const getStaticProps: GetStaticProps<Props, { threadId: string }> = async (context) => {
try {
const threadID = context.params?.threadId;
if (!threadID) {
console.log('[!] Thread ID not provided');
return { notFound: true };
}
const postID = await threadsAPI.getPostIDfromThreadID(threadID);
if (!postID) {
console.log(
'[!] Post ID not found with provided Thread ID (in threadsAPI.getPostIDfromThreadID):',
threadID,
);
return { notFound: true };
}
const thread = await threadsAPI.getThreads(postID);
const { containing_thread } = thread;
return {
props: {
threadID,
thread: containing_thread,
},
revalidate: 10,
};
} catch (err) {
console.error('[*] Error fetching Thread', err);
throw err;
}
};
export async function getStaticPaths() {
return {
paths: [],
fallback: true,
};
}
🏴☠️ Useful Building Blocks
- Looking for an API client?
- junhoyeo/threads-api
- Using Private Git Submodules when deploying with Vercel?
- junhoyeo/vercel-submodules
🏴☠️ Inspired from 🤍
License
MIT © Junho Yeo
