@commont/react

Getting set up

To use Commont, you need to create a new account via our signup page. You can sign up using an email and password or by using GitHub or Google. Once you have an account, you can access the Commont dashboard. Initially, you'll see one default project that you can configure as you need.

👀 Read the docs for more information.

Installing @commont/react

yarn add @commont/react commont # npm install @commont/reactcommont

The package exports a useComments hook that you can use to fetch the comments for your project.

Using useComments hook

useComments fetches comments from the backend on mount and whenever take or skip change.

Parameters

useComments takes an object with the following parameters:

• projectId — Your project ID.
• topic — Comments will be fetched for a particular topic, e.g. my-post-about-cats.
• take — Number of comments to fetch.
• skip — Number of comments to skip (offset).

Example usage in a React component

import { useComments, CommentStatus } from '@commont/react';

const Post = ({ projectId }) => {
  const { comments, count, loading, refetch, error } = useComments({
    projectId,
    topic: 'post-id'
    take: 10, skip: 0
  });

  return (
    <section>
      <h3>{count} comments</h3>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <div>
          {comments.map(({ author, content, createdAt, status }) => (
            <article key={createdAt} className="bg-gray-100 rounded my-6 p-4">
              <div className="font-bold mb-2">
                {author} ・ {new Date(createdAt).toLocaleDateString()}
              </div>
              <p className="text-gray-700">{content}</p>
            </article>
          ))}
        </div>
      )}
    </section>
  )
}

Examples

• Demo with Theme UI
• Demo with Tailwind
• Demo with Theme UI — an example with pagination

API Reference

UseCommentsComment

interface UseCommentsComment {
  topic: string;
  author: string;
  content: string;
  createdAt: string;
  status?: UseCommentsStatus;
}

UseCommentsStatus

When user adds a new comment it will be in one of four states:

• sending — add comment request is still pending.
• added — the comment was successfully added and is visible for other people.
• delivered-awaiting-approval — the comment was successfully added, but it's not yet visible for other people.
• failed — adding a comment was unsuccessful.

type UseCommentsStatus =
  | 'sending'
  | 'added'
  | 'delivered-awaiting-approval'
  | 'failed';

UseCommentsParameters

interface UseCommentsParameters {
  projectId: string;
  topic: string;
  take?: number;
  skip?: number;
}

UseCommentsResult

interface UseComentsResult {
  comments: UseCommentsComment[];
  addComment: ({
    content,
    author,
  }: Pick<UseCommentsComment, 'content' | 'author'>) => void;
  refetch: () => void;
  count: number;
  loading: boolean;
  error: string | null;
}