Livetrack-react NPM

LiveTrack

Prerequisites

React: Ensure you have a React application setup.
Tailwind CSS: Install and configure Tailwind CSS in your project.

Getting Started

Create a React App using Vite

Follow these steps to set up your React application:

Create a new React app with Vite:

npm create vite@latest my-app --template react
cd my-app

Install Tailwind CSS:
```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
```
Configure Tailwind in your project by updating the tailwind.config.js and adding the Tailwind directives to your CSS file.
Install LiveTrack NPM Package:
```
npm i livetrack-react
```

Usage

Wrap Your App with `LiveTrackProvider`

To integrate LiveTrack into your React app, wrap your application with the LiveTrackProvider and include the LiveUsersWidget component:

import { LiveTrackProvider } from "livetrack-react";
import { LiveUsersWidget } from "./components/LiveUsersWidget";

function App() {
  return (
    <LiveTrackProvider apiKey="your-api-key">
      <LiveUsersWidget message="Viewing this page" />
    </LiveTrackProvider>
  );
}

export default App;

Replace "your-api-key" with the API key you will generate in the dashboard.

Create a Custom Widget Using the Hook

You can use the useLiveUsers hook to create a custom widget. Here's an example:

Install Lucide React:

npm install lucide-react

import { useLiveUsers } from "livetrack-react";
import { BadgeCheck, LoaderCircle } from "lucide-react";

export const LiveUsersWidget = ({ message }) => {
  const { liveUsers, error, isLoading } = useLiveUsers();

  return (
    <div className="fixed bottom-4 left-4 inline-flex items-center p-4 px-5 bg-white text-sm font-medium font-poppins border rounded-full shadow-lg h-20 max-w-xs space-x-2 z-[9999]">
      <div className="bg-pink-100 rounded-full w-14 h-14 flex items-center justify-center">
        <div className="bg-pink-500 text-white rounded-full w-12 h-12 flex items-center justify-center font-bold text-lg animate-pulse">
          {isLoading ? <LoaderCircle /> : error ? "??" : liveUsers}
        </div>
      </div>

      <div className="flex flex-col items-start justify-center">
        {!isLoading && !error && (
          <>
            <div className="text-lg font-semibold text-black">
              {`${liveUsers} people`}
            </div>
            <div className="text-gray-500 text-xs">{message}</div>
            <div className="flex items-center justify-center gap-1 text-blue-500 text-xs">
              <span>
                Verified by <b className="font-mono">Live</b>
              </span>
              <BadgeCheck className="h-4 w-4 fill-blue-500 text-white" />
            </div>
          </>
        )}

        {!isLoading && error && (
          <div className="font-semibold text-red-500 text-xs">{error}</div>
        )}
      </div>
    </div>
  );
};

API Key

You can generate your API key from the LiveTrack Dashboard. Visit the provided link to create an account and generate your key. Replace "your-api-key" in the examples above with the key from your dashboard.