Getting started

Render 7tv emotes in React, or enhance existing HTML with the DOM adapter.

Install

0.2.0 is a release preview. Build the repository and run npm pack, then install the generated tarball in your app. After publication, use npm install react-7tv.

Terminal

npm install /path/to/react-7tv-0.2.0.tgz

Render your first message

React 19.2+ is required. Place one provider above the content sharing an emote set.

Message.tsx

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

export function Message() {
  return (
    <Provider7tv emoteSetId="01M1M3EN0JK4ZWJAP3YPMQMV5T">
      <Text7tv>Hello catJAM gg</Text7tv>
    </Provider7tv>
  );
}

Defaults

Plain aliases are case-sensitive. Unknown aliases remain text.
Images animate when an animated asset is available.
No CSS import is needed. Override the image style to change its size.
The global set is public. You can also pass your own emote set ID.

NextAstro