2019

gappa-comments

Fully-responsive, configurable threaded comment component with user tagging support.

A fully-responsive and configurable threaded comment component for React applications. Supports nested comment threads, user mentions/tagging, and customizable styling. Built to handle complex comment hierarchies with performance optimizations for large discussion trees. Published to internal npm registry for use across Innovation Lab projects.

Tech Stack

React.jsTypeScriptNPM

Impact

Features

Threading+Tags

Platform

npm

Gallery

Implementation Highlight

CommentThread.tsxtypescript

import { GappaComments } from 'gappa-comments';

export function Discussion({ postId }: { postId: string }) {
  const [comments, setComments] = useState<Comment[]>([]);

  return (
    <GappaComments
      comments={comments}
      onReply={(parent, text) => addReply(parent.id, text)}
      onTag={(user) => notifyUser(user)}
      maxDepth={5}
      allowMarkdown
    />
  );
}