React

// resources/js/components/CommentThread.tsx
import { CommentThread as CommentifyThread } from "@commentify/react";

export default function CommentThread({ type, id }) {
  return <CommentifyThread type={type} id={id} loginUrl="/login" />;
}

{{-- resources/views/articles/show.blade.php --}}
<div id="comments" data-type="articles" data-id="{{ $article->id }}"></div>

@viteReactRefresh
@vite('resources/js/comments.tsx')

// resources/js/comments.tsx
import { createRoot } from "react-dom/client";
import CommentThread from "./components/CommentThread";

const el = document.getElementById("comments");

if (el) {
  createRoot(el).render(
    <CommentThread type={el.dataset.type!} id={Number(el.dataset.id)} />
  );
}

// resources/js/Pages/Articles/Show.tsx
import CommentThread from "@/components/CommentThread";

export default function Show({ article }) {
  return (
    <article>
      <h1>{article.title}</h1>
      <CommentThread type="articles" id={article.id} />
    </article>
  );
}

import { CommentifyClient } from "@commentify/core";
import { CommentifyProvider } from "@commentify/react";

<CommentifyProvider client={new CommentifyClient({ token })}>
  <App />
</CommentifyProvider>