SPFx HoverReactionsBar Control

Official documentation: https://pnp.github.io/sp-dev-fx-controls-react/controls/HoverReactionsBar/

The HoverReactionsBar control from PnP SPFx React Controls allows users to select an emoji from a reaction bar or emoji picker. It is useful for scenarios such as reactions to comments, cards, news posts, documents, or social interactions inside SharePoint Framework web parts. The official documentation describes it as a control that lets the user select an emoji from the emoji bar or picker. (PNP)

Install the PnP SPFx React Controls package

npm install @pnp/spfx-controls-react --save

Import

import { HoverReactionsBar } from '@pnp/spfx-controls-react/lib/HoverReactionsBar';

Complete React Component

import * as React from 'react';
import { useState, useRef } from 'react';
import { HoverReactionsBar } from '@pnp/spfx-controls-react/lib/HoverReactionsBar';
const HoverReactionsBarWp: React.FC = () => {
  const [isOpenHoverReactionBar, setIsOpenHoverReactionBar] = useState(false);
  const divRefAddReaction = useRef<HTMLDivElement>(null);
  const onSelectEmoji = React.useCallback(
    async (emoji?: string, emojiInfo?: any) => {
      console.log('emoji', emoji);
      console.log('emojiInfo object', emojiInfo);
      setIsOpenHoverReactionBar(false);
    },
    []
  );
  return (
    <div>
      <div
        ref={divRefAddReaction}
        onClick={() => setIsOpenHoverReactionBar(true)}
        style={{ cursor: 'pointer' }}
      >
        Abrir Reações
      </div>
      <HoverReactionsBar
        isOpen={isOpenHoverReactionBar}
        onSelect={onSelectEmoji}
        onDismiss={() => setIsOpenHoverReactionBar(false)}
        target={divRefAddReaction.current as HTMLDivElement}
      />
    </div>
  );
};
export default HoverReactionsBarWp;

How the code works

The component uses useState to control whether the reaction bar is visible or hidden.

const [isOpenHoverReactionBar, setIsOpenHoverReactionBar] = useState(false);

The useRef hook stores a reference to the HTML element that opens the reaction bar. This is important because the HoverReactionsBar needs a target element to know where it should appear.

const divRefAddReaction = useRef<HTMLDivElement>(null);

When the user clicks Abrir Reações, the state changes to true, and the control is displayed.

onClick={() => setIsOpenHoverReactionBar(true)}

The onSelectEmoji function receives the selected emoji and the emoji information object. In this example, both values are written to the browser console, and then the reaction bar is closed.

const onSelectEmoji = React.useCallback(
  async (emoji?: string, emojiInfo?: any) => {
    console.log('emoji', emoji);
    console.log('emojiInfo object', emojiInfo);
    setIsOpenHoverReactionBar(false);
  },
  []
);

The HoverReactionsBar itself receives four important properties:

<HoverReactionsBar
  isOpen={isOpenHoverReactionBar}
  onSelect={onSelectEmoji}
  onDismiss={() => setIsOpenHoverReactionBar(false)}
  target={divRefAddReaction.current as HTMLDivElement}
/>

According to the official documentation, the main required properties are isOpen, onSelect, onDismiss, and target. Optional properties include top4Reactions and themeV8. (PNP)

Why this control is useful in SPFx

In SharePoint Framework solutions, reactions are a simple way to improve user interaction without creating a complex custom emoji picker from scratch. Instead of manually building the UI, positioning logic, dismissal behavior, and emoji selection handling, the PnP control provides a ready-to-use component.

This example is intentionally simple: it opens the reaction bar, lets the user select an emoji, logs the result, and closes the bar. From here, a real SPFx solution could save the selected emoji to SharePoint, Microsoft Graph, Dataverse, or another backend.

Project Roadmap Reference

This article belongs to the PnP SPFx React Controls learning roadmap, which tracks each control as a separate Web Part and technical article.