Embed Static Threads in your React/Next.js application

by React

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

🏴‍☠️ Inspired from 🤍

License

MIT © Junho Yeo