@hiyve/react-reactions

Visual reactions and effects overlay for Hiyve video conferencing rooms — floating emojis, confetti, fireworks, and custom animations synced across all participants via WebRTC data messages.

Installation

npm install @hiyve/react-reactions
Copy

Peer dependencies:

npm install @hiyve/react @hiyve/utilities @mui/material @mui/icons-material @emotion/react @emotion/styled react
Copy

Quick Start

import { HiyveProvider } from '@hiyve/react';
import { useReactionSync, ReactionsOverlay, ReactionPicker, DEFAULT_EFFECTS } from '@hiyve/react-reactions';

function Room() {
  const { triggerReaction, canTrigger, isCoolingDown, cooldownRemaining, activeEffect, clearEffect } =
    useReactionSync({
      localUserId: 'user-123',
      isOwner: true,
      permission: 'everyone',
    });

  return (
    <>
      <ReactionsOverlay activeEffect={activeEffect} onEffectComplete={clearEffect} />
      {canTrigger && (
        <ReactionPicker
          effects={DEFAULT_EFFECTS}
          onSelect={triggerReaction}
          disabled={isCoolingDown}
        />
      )}
    </>
  );
}

function App() {
  return (
    <HiyveProvider>
      <Room />
    </HiyveProvider>
  );
}
Copy

Tokens are generated automatically when your server uses @hiyve/admin middleware. See @hiyve/react for HiyveProvider configuration options.

Components

Hooks

Built-in Effects

9 effects included out of the box via DEFAULT_EFFECTS:

Permissions

Control who can trigger reactions via the permission option on useReactionSync:

// Only room owner (default)
useReactionSync({ localUserId, isOwner, permission: 'owner-only' });

// Any participant
useReactionSync({ localUserId, isOwner, permission: 'everyone' });

// Custom logic
useReactionSync({
  localUserId,
  isOwner,
  permission: (userId, isOwner) => isOwner || userId.endsWith('@admin.com'),
});
Copy

Custom Effects

Register custom effects by providing a renderer component:

import type { CustomEffectProps, ReactionEffect } from '@hiyve/react-reactions';

function RainEffect({ onComplete, width, height }: CustomEffectProps) {
  // Your custom animation logic
  useEffect(() => {
    const timer = setTimeout(onComplete, 4000);
    return () => clearTimeout(timer);
  }, [onComplete]);

  return <canvas width={width} height={height} />;
}

const customEffects: ReactionEffect[] = [
  ...DEFAULT_EFFECTS,
  {
    id: 'rain',
    label: 'Rain',
    type: 'custom',
    renderer: RainEffect,
    thumbnail: '🌧️',
    duration: 4000,
  },
];

// Pass to useReactionSync
useReactionSync({ localUserId, isOwner, effects: customEffects });
Copy

Customization

ReactionPicker Labels, Colors, and Styles

<ReactionPicker
  effects={DEFAULT_EFFECTS}
  onSelect={triggerReaction}
  labels={{ tooltip: 'Send a reaction' }}
  colors={{ background: '#1a1a2e', hoverBackground: '#16213e', triggerColor: '#fff' }}
  styles={{ columns: 3, itemSize: 56 }}
  triggerIcon={<span>😀</span>}
/>
Copy

ReactionsOverlay

<ReactionsOverlay
  activeEffect={activeEffect}
  onEffectComplete={clearEffect}
  zIndex={3000}
/>
Copy

Props

useReactionSync Options

useReactionSync Return

ReactionsOverlayProps

ReactionPickerProps

Types

Requirements

• React 18+
• @hiyve/react — must be inside <HiyveProvider>
• @mui/material v5 or v6 + Emotion