HoverReactionsBar in SPFx: Adding Interactive Emoji Reactions to Your Web Part

The SharePoint Framework ecosystem allows developers to create rich, modern, and highly interactive experiences inside Microsoft SharePoint. One of the strengths of SPFx is its ability to integrate reusable UI controls from the PnP community library.

In this article, we will explore the HoverReactionsBar control from the PnP SPFx React Controls library and understand how it can improve user interaction in your web parts.

Official documentation:
PnP HoverReactionsBar Documentation

What is HoverReactionsBar?

The HoverReactionsBar is a lightweight control that displays a floating reaction panel (emoji picker style) when triggered.

It is useful for scenarios like:

• Social intranet reactions
• Document feedback
• Employee recognition systems
• Quick sentiment collection
• Comment systems

This behavior is similar to reactions in:

• Microsoft Teams
• Facebook
• Slack

The control provides a modern UX without forcing you to build a custom emoji system.

Why use it in SPFx?

In enterprise environments, engagement matters.

Traditional SharePoint pages are static. Adding reactions can:

This is particularly useful in:

• News web parts
• Blog posts
• Knowledge base articles
• Team announcements

Understanding the code

Full example

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' }}
      >
        Open Reactions
      </div>
      <HoverReactionsBar
        isOpen={isOpenHoverReactionBar}
        onSelect={onSelectEmoji}
        onDismiss={() => setIsOpenHoverReactionBar(false)}
        target={divRefAddReaction.current as HTMLDivElement}
      />
    </div>
  );
};
export default HoverReactionsBarWp;

Code breakdown

1. Imports

import * as React from 'react';
import { useState, useRef } from 'react';
import { HoverReactionsBar } from '@pnp/spfx-controls-react/lib/HoverReactionsBar';

Here we import:

• React
• Hooks (useState, useRef)
• PnP control

The import path is the official one from the PnP library.

2. State management

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

This controls whether the reactions panel is visible.

Default:

false

Meaning closed initially.

3. Target reference

const divRefAddReaction = useRef<HTMLDivElement>(null);

This reference points to the HTML element where the reaction bar will anchor.

Without it, the popup would not know where to position itself.

Think of it as:

“Open the reaction bar near this element.”

4. Handling emoji selection

const onSelectEmoji = React.useCallback(
  async (emoji?: string, emojiInfo?: any) => {

This function fires when the user clicks a reaction.

Parameters:

Example output:

emoji 👍
emojiInfo { name: "thumbs_up" }

5. Closing after selection

setIsOpenHoverReactionBar(false);

After selecting an emoji, the bar closes automatically.

This improves UX.

6. Trigger area

<div
  ref={divRefAddReaction}
  onClick={() => setIsOpenHoverReactionBar(true)}
>

This div acts as the button.

When clicked:

setIsOpenHoverReactionBar(true)

The reaction bar opens.

7. The HoverReactionsBar itself

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

Main properties:

Execution flow

User clicks "Open Reactions"
        ↓
State becomes true
        ↓
HoverReactionsBar appears
        ↓
User selects emoji
        ↓
onSelect fires
        ↓
Console logs emoji
        ↓
Control closes

Simple and effective.

Real-world example

Imagine a company news web part:

New HR Policy Released
👍 ❤️ 🎉 👏

Users can react instantly without opening comments.

This creates measurable engagement.

Possible storage:

• SharePoint List
• Dataverse
• Microsoft Graph
• Azure Functions

Improvement suggestion

You can persist reactions:

await sp.web.lists
  .getByTitle("Reactions")
  .items.add({
    Emoji: emoji
  });

This allows analytics.

Examples:

• Most used reactions
• User sentiment
• Trending content

Conclusion

The HoverReactionsBar is a small but powerful UI enhancement for SPFx.

It helps transform static SharePoint pages into interactive collaboration experiences.

Key takeaways:

✅ Easy to implement
✅ Lightweight
✅ Modern UX
✅ Works great with React hooks
✅ Ideal for intranet engagement

For social-like interactions in SharePoint, this control is an excellent addition.

Progress Roadmap