@hasthiya_/headless-comments-react

import { useEditComment } from '@hasthiya_/headless-comments-react';

function EditButton({ commentId, currentContent }: { commentId: string; currentContent: string }) {
  const {
    isEditing,
    editContent,
    setEditContent,
    startEditing,
    submitEdit,
    cancelEdit,
    isSubmitting,
  } = useEditComment(commentId, {
    // Optional: provide your own handler (otherwise uses Provider context)
    onEdit: async (id, content) => {
      await fetch(`/api/comments/${id}`, { method: 'PATCH', body: JSON.stringify({ content }) });
    },
  });

  if (isEditing) {
    return (
      <div>
        <textarea value={editContent} onChange={(e) => setEditContent(e.target.value)} />
        <button onClick={submitEdit} disabled={isSubmitting}>Save</button>
        <button onClick={cancelEdit}>Cancel</button>
      </div>
    );
  }

  return <button onClick={() => startEditing(currentContent)}>Edit</button>;
}

import { useReplyTo } from '@hasthiya_/headless-comments-react';

function ReplyButton({ commentId }: { commentId: string }) {
  const {
    isReplying,
    replyContent,
    setReplyContent,
    openReply,
    submitReply,
    cancelReply,
    isSubmitting,
  } = useReplyTo(commentId);

  if (isReplying) {
    return (
      <div>
        <textarea value={replyContent} onChange={(e) => setReplyContent(e.target.value)} />
        <button onClick={submitReply} disabled={isSubmitting}>Reply</button>
        <button onClick={cancelReply}>Cancel</button>
      </div>
    );
  }

  return <button onClick={openReply}>Reply</button>;
}

import { useCommentReaction } from '@hasthiya_/headless-comments-react';

function ReactionBar({ commentId }: { commentId: string }) {
  const { toggle, isPending, reactions } = useCommentReaction(commentId);

  return (
    <div className="flex gap-1">
      {reactions.map((r) => (
        <button
          key={r.id}
          onClick={() => toggle(r.id)}
          disabled={isPending(r.id)}
          className={r.isActive ? 'bg-blue-100' : ''}
        >
          {r.emoji} {r.count > 0 && r.count}
        </button>
      ))}
    </div>
  );
}

import { useComment } from '@hasthiya_/headless-comments-react';

function MyComment({ comment }) {
  const {
    isAuthor,
    edit,
    reply,
    reaction,
    showReplies,
    toggleReplies,
    deleteComment,
    isPendingDelete,
  } = useComment(comment);

  return (
    <div>
      <p>{comment.content}</p>
      {isAuthor && <button onClick={() => edit.startEditing()}>Edit</button>}
      {isAuthor && (
        <button onClick={() => confirm('Delete?') && deleteComment()} disabled={isPendingDelete}>
          {isPendingDelete ? 'Deleting…' : 'Delete'}
        </button>
      )}
      <button onClick={reply.openReply}>Reply</button>
      <button onClick={toggleReplies}>
        {showReplies ? 'Hide' : 'Show'} Replies
      </button>
    </div>
  );
}

import { useSortedComments } from '@hasthiya_/headless-comments-react';

function SortableList({ comments }) {
  const { sortedComments, sortOrder, setSortOrder } = useSortedComments(
    comments,
    'newest',
    { persistKey: 'my-app-sort-order' } // optional: saves to localStorage
  );

  return (
    <div>
      <select value={sortOrder} onChange={(e) => setSortOrder(e.target.value)}>
        <option value="newest">Newest</option>
        <option value="oldest">Oldest</option>
        <option value="top">Top</option>
        <option value="popular">Popular</option>
      </select>
      {sortedComments.map((c) => <Comment key={c.id} comment={c} />)}
    </div>
  );
}
// sortOrder: 'newest' | 'oldest' | 'top' | 'popular' (top and popular are equivalent)

import { useCommentTree, createInMemoryAdapter } from '@hasthiya_/headless-comments-react';

const adapter = createInMemoryAdapter({
  initialComments: seedComments,
  latency: 200, // simulated network delay in ms
});

const tree = useCommentTree({ currentUser, adapter });

import { useCommentTree, createRestAdapter } from '@hasthiya_/headless-comments-react';

const adapter = createRestAdapter({
  baseUrl: '/api/comments',
  headers: {
    Authorization: `Bearer ${token}`,
    'Content-Type': 'application/json',
  },
});

// API endpoints expected:
// GET    /api/comments           — fetch all comments
// POST   /api/comments           — create comment { content, parentId? }
// PATCH  /api/comments/:id       — update comment { content }
// DELETE /api/comments/:id       — delete comment
// POST   /api/comments/:id/react — toggle reaction { reactionId }

const tree = useCommentTree({ currentUser, adapter });

import type { CommentAdapter, Comment } from '@hasthiya_/headless-comments-react';

const myAdapter: CommentAdapter = {
  async getComments() {
    const res = await fetch('/api/comments');
    return res.json(); // Comment[] or { comments, total, hasMore }
  },
  async createComment(content, parentId?) {
    const res = await fetch('/api/comments', {
      method: 'POST',
      body: JSON.stringify({ content, parentId }),
    });
    return res.json(); // Comment with server-generated ID
  },
  async updateComment(id, content) {
    const res = await fetch(`/api/comments/${id}`, {
      method: 'PATCH',
      body: JSON.stringify({ content }),
    });
    return res.json();
  },
  async deleteComment(id) {
    await fetch(`/api/comments/${id}`, { method: 'DELETE' });
  },
  async toggleReaction(commentId, reactionId) {
    await fetch(`/api/comments/${commentId}/react`, {
      method: 'POST',
      body: JSON.stringify({ reactionId }),
    });
  },
  // Optional: realtime updates
  subscribe(listener) {
    const ws = new WebSocket('/ws/comments');
    ws.onmessage = (e) => listener(JSON.parse(e.data));
    return () => ws.close();
  },
  dispose() {
    // cleanup connections
  },
};

import {
  addToTree,
  removeFromTree,
  updateInTree,
  toggleReactionInTree,
  exclusiveToggleReactionInTree,
  findCommentById,
  flattenComments,
  buildCommentTree,
  countReplies,
} from '@hasthiya_/headless-comments-react';

// Add a comment to the tree
const updated = addToTree(tree, newComment, parentId, 'append'); // or 'prepend'

// Remove a comment (and its subtree)
const afterDelete = removeFromTree(tree, commentId);

// Update a comment's fields
const afterEdit = updateInTree(tree, commentId, { content: 'new content', isEdited: true });

// Toggle a reaction (auto increments/decrements count and flips isActive)
const afterReaction = toggleReactionInTree(tree, commentId, 'like');

// Toggle with mutual exclusivity (only one active reaction at a time)
// If 'heart' is active: deactivates it, then activates 'like'
const exclusive = exclusiveToggleReactionInTree(tree, commentId, 'like');

// Find a comment by ID (recursive)
const comment = findCommentById(tree, 'comment-123');

// Flatten nested tree to a flat array
const flat = flattenComments(tree);

// Build nested tree from flat array (using parentId)
const nested = buildCommentTree(flatComments);

// Count all replies recursively
const replyCount = countReplies(comment);

import {
  sortComments,
  filterComments,
  searchComments,
} from '@hasthiya_/headless-comments-react';

// Sort by newest, oldest, popular, or top (top and popular are equivalent)
const sorted = sortComments(comments, 'newest');
const top = sortComments(comments, 'top'); // or 'popular' — net positive reactions first

// Sort recursively (sorts replies too)
const deepSorted = sortComments(comments, 'newest', { recursive: true });

// Filter comments
const filtered = filterComments(comments, (c) => !c.isDeleted);

// Search comments by content
const results = searchComments(comments, 'react hooks');

import '@hasthiya_/headless-comments-react/presets/styled/styles.css';
import { StyledCommentSection, useCommentTree } from '@hasthiya_/headless-comments-react';

const tree = useCommentTree({ initialComments, currentUser });
<StyledCommentSection tree={tree} currentUser={currentUser} />

:root {
  --cs-primary-color: #8b5cf6;
  --cs-bg-color: #0f172a;
  --cs-text-color: #f8fafc;
  --cs-border-color: #334155;
}

const theme = {
  primaryColor: '#f97316',
  backgroundColor: '#ffffff',
  textColor: '#1f2937',
  borderColor: '#e5e7eb',
  borderRadius: '12px',
  fontSize: '14px',
};

<StyledCommentSection tree={tree} currentUser={currentUser} theme={theme} />

<CommentSection
  tree={tree}
  currentUser={currentUser}
  renderReplyForm={({ onSubmit, placeholder }) => <MyForm onSubmit={onSubmit} placeholder={placeholder} />}
  renderComment={(comment, props) => <MyCommentCard comment={comment} {...props} />}
  renderAvatar={(user) => <img src={user.avatarUrl} alt={user.name} className="rounded-full" />}
/>

import { ShadcnCommentSection } from '@/components/comment-ui';
import { useCommentTree } from '@hasthiya_/headless-comments-react';

const tree = useCommentTree({ initialComments, currentUser });
<ShadcnCommentSection tree={tree} currentUser={currentUser} showReactions />