Reactions

Learn how to react to a Lens Publication and retrieve those reactions.

Reactions are a crucial feature in social media. They allow Profiles to express their feelings about a publication without needing to write a comment.

Lens Reactions are stored off-chain. This means that reactions are instant, and there's no need for signatures or gas to add a reaction.

Currently, the Lens Protocol supports two types of reactions. However, we anticipate expanding this list in the future.

enum PublicationReactionType {  Downvote = "DOWNVOTE",  Upvote = "UPVOTE",}

You can only react to Primary Publications type, which includes Post, Comment, or Quote.

In this section, we'll show you how to check if a Profile has reacted to a Publication.

const post: Post = // ...
console.log(post.operations.hasUpvoted); // true or falseconsole.log(post.operations.hasDownvoted); // true or false

To check if the active profile has reacted to a publication, use the publication.operations.hasReacted property. For more details, see the Publication Operations section.

const post: Post = // ...
console.log(post.operations.upvotes); // 42console.log(post.operations.downvotes); // 0

import { PrimaryPublication, PublicationReactionType, hasReacted, useReactionToggle } from '@lens-protocol/react-web';
type ReactionButtonProps = {  publication: PrimaryPublication;  reaction: PublicationReactionType;};
function ReactionButton({ publication, reaction }: ReactionButtonProps) {  const { execute: toggle, loading, error } = useReactionToggle();
  const hasReactionType = hasReacted({ publication, reaction });
  const toggleReaction = async () => {    await toggle({      reaction,      publication,    });  };
  if (error) return <ErrorMessage error={error} />;
  return (    <button onClick={toggleReaction} disabled={loading}>      <strong>{hasReactionType ? `Remove ${reaction}` : `Add ${reaction}`}</strong>    </button>  );}

That's it—you've now mastered the process of adding or removing reactions to a Publication.