Syntax & images

Choose how aliases match and how emotes render.

Matching aliases

Plain syntax respects word boundaries. Unknown aliases remain unchanged. Set caseSensitive: false on your syntax to ignore case.

Syntax.tsx

import { Text7tv, delimitedSyntax } from "react-7tv";

<Text7tv emotes={emotes}>Hello PETPET</Text7tv>

<Text7tv emotes={emotes} syntax={delimitedSyntax(":")}>
  Hello :PETPET:
</Text7tv>

<Text7tv emotes={emotes} syntax={delimitedSyntax("[emote:", "]")}>
  Hello [emote:PETPET]
</Text7tv>

Image options

Animation-off prefers static assets. If none exists, the animated original remains. size selects a CDN scale; style controls the displayed size.

Image.tsx

<Emote7tv
  emote={emote}
  animated={false}
  size={2}
  style={{ height: "2em" }}
/>

Custom rendering

Custom.tsx

<Text7tv
  emotes={emotes}
  renderEmote={(emote, { matchedText }) => (
    <span title={matchedText}>
      <Emote7tv emote={emote} />
    </span>
  )}
>
  Hello PETPET
</Text7tv>

NextServer rendering