React SDK

The Streamoji React SDK is a set of components and helper methods to implement the Streamoji Avatar Creator into React projects.

1. Installation

Streamoji React Avatar Creator is available as an npm package.

npm i @streamoji/react-avatar-creator

2. Basic Usage

To quickly embed the Streamoji Avatar Creator, import the AvatarCreator component and place it in your component tree.

import { AvatarCreator } from '@streamoji/react-avatar-creator';

export default function App() {
  return <AvatarCreator style={{ width: '100%', height: '100vh', border: 'none' }} />;
}

3. Components

AvatarCreator

The AvatarCreator component helps you load the Streamoji Avatars editor in an iframe where users can customize their avatar securely and you receive their exported avatar URL upon completion.

Parameters

subdomain [optional]: Tenant subdomain parameter.
className [optional]: The CSS classes to apply to the iframe.
style [optional]: The CSS styles to apply to the iframe.
config [optional]: Editor Configuration:
- bodyType: 'Half' | 'Full'
- language: string (e.g. 'en')
- themeColor: Hex color code
- saveConfirm: boolean
- thumbnail: boolean
onAvatarExported [optional]: Callback triggered when avatar is successfully exported.
onUserSet [optional]: Callback triggered when the user context initializes.

Example

import { AvatarCreator, AvatarCreatorConfig, AvatarExportedEvent } from '@streamoji/react-avatar-creator';

const config: AvatarCreatorConfig = {
  bodyType: 'Full',
  thumbnail: true,
  saveConfirm: true,
  whiteLabelTitle: 'My Custom App',
  whiteLabelColor: '#BB86FC',
};

export default function App() {
  const handleOnAvatarExported = (event: AvatarExportedEvent) => {
    console.log(`Avatar URL: ${event.data.url}`);
  };

  return (
    <AvatarCreator 
      config={config} 
      style={{ width: '100%', height: '100vh', border: 'none' }} 
      onAvatarExported={handleOnAvatarExported} 
    />
  );
}

AvatarCreatorRaw

AvatarCreatorRaw is a lower-level component that establishes the iframe and message-bus connections without abstracting away explicit event callbacks. You receive all broadcast messages via a single hook.

Example

import { AvatarCreatorRaw, AvatarCreatorEvent } from '@streamoji/react-avatar-creator';

export default function App() {
  const handleCustomEvent = (event: AvatarCreatorEvent) => {
    console.log(`Received raw Custom Event structure:`, event);
  };

  return (
    <AvatarCreatorRaw 
       style={{ width: '100%', height: '100vh', border: 'none' }} 
       onEventReceived={handleCustomEvent} 
    />
  );
}