tiktok-live-connector-react

Getting Started

Install the package via npm:

npm i install tiktok-live-connector-react

Create your first chat connection

// src/components/TikTokChat.js
import React, { useEffect, useState } from 'react';
import { WebcastPushConnection } from 'tiktok-live-connector';

const TikTokChat = ({ username }) => {
  const [connectionState, setConnectionState] = useState(null);
  const [chatMessages, setChatMessages] = useState([]);
  const [giftMessages, setGiftMessages] = useState([]);

  useEffect(() => {
    const tiktokLiveConnection = new WebcastPushConnection(username);

    tiktokLiveConnection.connect()
      .then(state => {
        console.info(`Connected to roomId ${state.roomId}`);
        setConnectionState(state);
      })
      .catch(err => {
        console.error('Failed to connect', err);
      });

    tiktokLiveConnection.on('chat', data => {
      setChatMessages(prevMessages => [...prevMessages, data]);
    });

    tiktokLiveConnection.on('gift', data => {
      setGiftMessages(prevMessages => [...prevMessages, data]);
    });

    // Cleanup on unmount
    return () => tiktokLiveConnection.disconnect();
  }, [username]);

  return (
    <div>
      <h1>TikTok Live Chat</h1>
      {/* Display chat messages and gifts */}
      {/* ... */}
    </div>
  );
};

export default TikTokChat;