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.

Reaction Types

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.

Check Reaction

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

You must be authenticated with the Profile you want to check for reactions. See Profile Login for more information.

Both Lens SDKs surface two booleans properties that indicated wheter the logged-in 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.

Reaction Stats

Both Lens SDKs surface stats about the reactions a publication has received.

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

React to Publication

You must be authenticated with a Profile to perform a reaction. See Profile Login for more information.

You can use the useReactionToggle hook to react to a Lens Publication.

Take note of the hasReacted helper function. It determines whether the active profile has already reacted to the publication with a specified type of reaction.

Available in @lens-protocol/react-web and @lens-protocol/react-native

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.