Quickstart

Load your personal Ready Player Me avatar in your React project in less than 5 minutes.

Before you begin

• Sign in to Studio (Developer Dashboard) and copy your subdomain. This will allow you to create and load an avatar in your domain at a later step.

Install the package

Ready Player Me React SDK is available as an npm package. Run the following command in the root of your React project.

npm i @readyplayerme/rpm-react-sdk

Overview

Ready Player Me React SDK comes with two main components.

• AvatarCreator: A component wrapping the Ready Player Me in an iFrame with parameters to configure the creator.

• AvatarCreatorViewer: A combination of AvatarCreator and Visage to load and render the avatar after creation. Visage is a 3D viewer layer of Ready Player Me which is used for loading and visualizing 3D objects and Avatars. Visage comes with two main components (Exhibit and Avatar).

Import the package and integrate the Avatar Creator

After installing the npm package into your project, you can import the AvatarCreatorViewer Component and pass your subdomain as a parameter to load the Ready Player Me in your React project. You can also add a onAvatarExported callback to the component to receive the avatar's URL when it is exported.

import { AvatarCreatorViewer } from '@readyplayerme/rpm-react-sdk';

export default function App() {
  const handleOnAvatarExported = (url: string) => {
    console.log(`Avatar URL is: ${url}`)
  }

  return (
    <div>
      <AvatarCreatorViewer 
        subdomain="your_subdomain" 
        onAvatarExported={handleOnAvatarExported}/>
    </div>
  );
}

If you want to signup later, you can use demo as subdomain parameter.

Check out the live code sample on CodeSandbox

Next Steps

Learn how to customize the experience tailored to your app by checking out

• The details about integrating the avatar creator

• How to load and display an avatar