react-playmakers

Implementation of the PlayMakers API for ReactJS.

Installation

npm install react-playmakers 
Copy

Example use-cases

File: components/User.tsx

import { useUser } from "react-playmakers";

/**
 * UserComponent - Fetches and displays user information using react-playmakers.
 *
 * @param {string} userId - The ID of the user to fetch.
 */
export default function UserComponent({ userId }: { userId: string }) {
  // Fetch user details using the provided user ID
  const { user } = useUser(userId);

  // Display the user's username 
  return (
    <div>
      <h1>Welcome, {user?.username}</h1>
    </div>
  );
}
Copy

File: App.tsx

import {PlayMakersProvider } from "react-playmakers";
import UserComponent from "@/components/User";

/**
 * Root application component. Wraps the application with
 * PlayMakersProvider to provide context for react-playmakers.
 * 
 * This example uses the Demo project ID and test user's ID. 
 */

function App() {

  const projectId = "piNhGEaTE"; // Demo project ID
  const userId = "50ecc99c-f0d1-7003-0cfe-b0be62e6363f"; // Example user's ID

  return (
    <PlayMakersProvider PROJECT_ID={projectId}>
      <UserComponent userId={userId} />
    </PlayMakersProvider>
  );
 };

export default App;

Copy

Demo

To see this package in action, check out our live demo website:

🌐 Live Demo Website

License

MIT