[TIL] React에서 utterances 구현하기

Comment를 마크다운으로 작성해 GitHub Issues로 저장할 수 있는 utterances 플러그인을 React에서 사용해보자

 

1. Comment를 저장할 repository를 생성하고 아래 링크에서 utterances를 연동해준다

GitHub: Where the world builds software

 

2. 생성한 repository에 다음 파일을 생성해 플러그인을 사용할 url들을 입력하고 넣어주자

 

[utterances.json]

{
  "origins": [
    "http://localhost:3000",
    "https://localhost:3000",
    "http://frontend-master-library.vercel.app",
    "https://frontend-master-library.vercel.app"
  ]
}

 

3. React 프로젝트에서 다음과 같이 사용할 수 있다

 

[utterances.tsx]

import React, { createRef, useLayoutEffect } from "react";

const src = "https://utteranc.es/client.js";

export interface IUtterancesProps {
  repo: string;
  theme: string;
}

const Utterances: React.FC<IUtterancesProps> = React.memo(({ repo, theme }) => {
  const containerRef = createRef<HTMLDivElement>();

  useLayoutEffect(() => {
    const utterances = document.createElement("script");

    const attributes = {
      src,
      repo,
      theme,
      "issue-term": "pathname",
      label: "💬 comments",
      crossOrigin: "anonymous",
      async: "true",
    };

    Object.entries(attributes).forEach(([key, value]) => {
      utterances.setAttribute(key, value);
    });

    containerRef.current!.appendChild(utterances);
  }, [repo]);

  return <div ref={containerRef} />;
});

Utterances.displayName = "Utterances";

export default Utterances;

* Issue title contains page pathname 옵션으로,  url의 pathname 기준으로 Issue가 구분

 

[detail.tsx]

import Utterances from "../api/utterances";

...
<Utterances repo="FTOOOS/comment" theme="photon-dark" />
...

* repo는 계정/연동한 repository이름을 입력

 

성공!

 

다른 테마들 및 옵션은 공식 문서에서 확인할 수 있다!

utterances