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: Auth.tsx

  import {useAuth} from "./AuthContext";

  const Auth = () => {
   const {userData, signIn, signOut} = useAuth();

   const username = "test";
   const password = "exampleTesting$1";

   const handleSignIn = async () => {
       try {
           const {nextStep} = await signIn(username, password);
           if (nextStep.signInStep === "DONE")
               console.log("User signed in", userData);
       } catch (error) {
           console.error(error);
       }
   };

   return (
       <div>
          {userData ? (
            <>
              <h1>Welcome, {userData.username}</h1>
              <p>{userData.userId}</p>
              <p>{userData.email}</p>
            </>
            ) : 
              <h1>Not signed in</h1>
            }
           <button onClick={signOut}>Sign Out</button>
           <button onClick={handleSignIn}>Sign In</button>
       </div>
  );
 };

 export default Auth;
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} />
      <Auth/>
    </PlayMakersProvider>
  );
 };

export default App;

Copy

Demo

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

🌐 Live Demo Website

License

MIT