> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sublay.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> The 8-type reaction system for entities and comments

Sublay supports 8 distinct reaction types on both entities and comments. Each reaction type has a defined impact on the author's reputation score.

<Note>
  **Requires the `reactions` bundle.** Reactions are only available when the `reactions` bundle is installed on your project. See [Bundles](/v8/bundles) to add it.
</Note>

## Reaction Types

| Type | Reputation Impact |
| - | :-: |
| `upvote` | +1 |
| `downvote` | -1 |
| `like` | +1 |
| `love` | +2 |
| `wow` | +1 |
| `sad` | 0 |
| `angry` | 0 |
| `funny` | +1 |

Each entity and comment stores a `reactionCounts` object with a count for each type, and a `userReaction` field with the authenticated user's current reaction (or `null`).

## The Toggle Pattern

The recommended way to work with reactions is `useReactionToggle`. It manages optimistic updates, handles toggling (selecting the same reaction again removes it), and reverts state on server errors.

```tsx theme={null}
import { useReactionToggle } from "@sublay/react-js";

function ReactionButton({ entity }) {
  const { currentReaction, reactionCounts, toggleReaction, loading } = useReactionToggle({
    targetType: "entity",
    targetId: entity.id,
    initialReaction: entity.userReaction,
    initialReactionCounts: entity.reactionCounts,
  });

  return (
    <button
      onClick={() => toggleReaction({ reactionType: "upvote" })}
      disabled={loading}
    >
      {reactionCounts.upvote ?? 0} Upvotes
      {currentReaction === "upvote" ? " (active)" : ""}
    </button>
  );
}
```

## Hooks

<CardGroup cols={2}>
  <Card title="useReactionToggle" href="/v8/hooks/reactions/use-reaction-toggle">
    Manage reaction state with optimistic updates and toggle behavior. The recommended hook for reaction UIs.
  </Card>

  <Card title="useAddReaction" href="/v8/hooks/reactions/use-add-reaction">
    Low-level hook to add a reaction to an entity or comment.
  </Card>

  <Card title="useRemoveReaction" href="/v8/hooks/reactions/use-remove-reaction">
    Low-level hook to remove the authenticated user's reaction.
  </Card>

  <Card title="useFetchEntityReactions" href="/v8/hooks/reactions/use-fetch-entity-reactions">
    Fetch a paginated list of reactions on an entity, optionally filtered by type.
  </Card>

  <Card title="useFetchCommentReactions" href="/v8/hooks/reactions/use-fetch-comment-reactions">
    Fetch a paginated list of reactions on a comment, optionally filtered by type.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.