@allior/wmake-emotes

Emote providers for streaming widgets: 7TV, BetterTTV, FrankerFaceZ. Load global and user emote sets, zero-width emotes (7TV).

Installation

npm install @allior/wmake-emotes

Usage

7TV

import {
  get7TVGlobalEmoteSet,
  get7TVUserEmoteSet,
  extractZeroWidthEmotes,
  type SevenTV,
} from "@allior/wmake-emotes";

const global = await get7TVGlobalEmoteSet();
const user = await get7TVUserEmoteSet("twitch_channel_id");
const all = [...global, ...user];
const zeroWidth = extractZeroWidthEmotes(all);

BetterTTV

import {
  getBetterTTVGlobalEmoteSet,
  getBetterTTVUserEmoteCacheResponse,
  EmotesProvider,
  type BetterTTV,
} from "@allior/wmake-emotes";

const global = await getBetterTTVGlobalEmoteSet();
const cache = await getBetterTTVUserEmoteCacheResponse(
  EmotesProvider.Twitch,
  "channel_id",
);
const channel = cache.channelEmotes ?? [];
const shared = cache.sharedEmotes ?? [];

FrankerFaceZ

import {
  getFrankerFaceZGlobalEmoteSet,
  getFrankerFaceZUserEmoteSet,
  type FrankerFaceZ,
} from "@allior/wmake-emotes";

const global = await getFrankerFaceZGlobalEmoteSet();
const user = await getFrankerFaceZUserEmoteSet("twitch_username");

Common types

• MessageEmote — emote in message format (id?, name, urls).
• EmotesProvider — enum: Twitch, Youtube (for BetterTTV API).
• EmoteReference (7TV) — id, name.

React: hook useEmotes

Loads emotes from all providers (default Twitch) and returns lists plus zero-width info.

import { useEmotes, EmotesProvider } from "@allior/wmake-emotes";

function Widget() {
  const {
    SevenTVEmotes,
    SevenTVZeroWidthEmotes,
    BetterTTVEmotes,
    FrankerFaceZEmotes,
    isLoaded,
    isZeroWidthEmote,
    reloadEmotes,
  } = useEmotes({
    username: "channel_login",   // for FFZ
    providerId: "twitch_id",     // for 7TV and BTTV
    providers: [EmotesProvider.Twitch],
  });

  if (!isLoaded) return <div>Loading emotes…</div>;
  // ...
}

Options:

• username — channel login (FrankerFaceZ).
• providerId — channel ID (7TV, BetterTTV).
• providers — array of providers, default [EmotesProvider.Twitch].

Build

npm run build   # build dist + IIFE + types
npm run clean   # clean dist