react-playmakers/README.md

React wrapper providing utilities for PlayMakers integration

# react-playmakers

Implementation of the PlayMakers API for ReactJS.

## Installation

```sh
npm install react-playmakers 
```

## Example use-cases

File: components/User.tsx

```javascript
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>
  );
}
```

File: App.tsx 

```javascript
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 prject ID
  const userId = "50ecc99c-f0d1-7003-0cfe-b0be62e6363f"; // test user's ID

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

export default App;

```

## Demo

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

🌐 **[Live Demo Website](https://makers-hub.playmakers.co)**  

## License

MIT