ReactifySDK · React

React installation

Custom elements work in JSX, but the script must run in the browser once. Use a tiny client component to inject the bundle; keep thread markup in the same subtree so layout is predictable.

1. Client-only script loader

ReactifyLoader.tsx

// ReactifyLoader.tsx — mark "use client"
import { useEffect } from "react";

const SRC = "https://reactify-cdn.s3.us-east-2.amazonaws.com/reactify.js";

export function ReactifyLoader() {
  useEffect(() => {
    if (typeof window === "undefined") return;
    if (document.querySelector(`script[src="${SRC}"]`)) return;
    const s = document.createElement("script");
    s.src = SRC;
    s.async = true;
    document.body.appendChild(s);
  }, []);
  return null;
}

2. Use the element

TypeScript may warn on unknown intrinsic elements—add a reactify-thread declaration in a *.d.ts or suppress per line as below.

Component

import { ReactifyLoader } from "./ReactifyLoader";

export function ThreadSection() {
  return (
    <>
      <ReactifyLoader />
      {/* eslint-disable-next-line react/no-unknown-property */}
      <reactify-thread template="hot-takes" />
    </>
  );
}

Strict mode & Fast Refresh

Guard script injection with a DOM query (shown above) so double mount in development does not insert two tags. Thread state lives in the custom element; remounting the React tree recreates the element and refetches—pin keys if you need stability across navigations.

← HTML Next.js →