Examples

Working examples for React, Next.js, Astro, and React Router.

One provider. As many messages as you need.

Message.tsx

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

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

Run the repository examplepnpm --filter @react-7tv/example-vite dev

Fetch on the server. Pass the emotes into a client component.

Full source ↗

app/page.tsx

import { fetchEmoteSet } from "react-7tv/core";
import { Message } from "./Message";

export default async function Page() {
  const emotes = await fetchEmoteSet("01M1M3EN0JK4ZWJAP3YPMQMV5T");
  return <Message emotes={emotes} />;
}

app/Message.tsx

"use client";
import { Text7tv, type EmoteModel7tv } from "react-7tv";

export function Message({ emotes }: {
  emotes: readonly EmoteModel7tv[];
}) {
  return <Text7tv emotes={emotes}>Hello catJAM gg</Text7tv>;
}

Run the repository examplepnpm --filter @react-7tv/example-next dev

Keep your Astro HTML. Add emotes with a small browser script.

Full source ↗

src/pages/chat.astro

<article data-emotes>Hello catJAM gg</article>

<script>
  import { fetchEmoteSet } from "react-7tv/core";
  import { enhance7tvContent } from "react-7tv/dom";

  const root = document.querySelector("[data-emotes]");
  if (root) {
    fetchEmoteSet("01M1M3EN0JK4ZWJAP3YPMQMV5T")
      .then((emotes) => enhance7tvContent(root, {
        emotes,
        excludeSelector: "astro-island",
      }))
      .catch(console.error);
  }
</script>

Open the live Astro demo ↗Using ClientRouter? Lifecycle setup ↗

Run the repository examplepnpm marketing:dev

Load an emote set in your route. Render with the same data.

Full source ↗

app/routes/chat.tsx

import { useLoaderData } from "react-router";
import { fetchEmoteSet } from "react-7tv/core";
import { Text7tv } from "react-7tv";

export async function loader() {
  return { emotes: await fetchEmoteSet("01M1M3EN0JK4ZWJAP3YPMQMV5T") };
}

export default function Chat() {
  const { emotes } = useLoaderData<typeof loader>();
  return <Text7tv emotes={emotes}>Hello catJAM gg</Text7tv>;
}

Run the repository examplepnpm --filter @react-7tv/example-react-router dev

First time here? Install workspace dependencies and build the package.Local setup ↗