## Installing
Our `@trulience/react-sdk` package allows you to embed a Trulience interactive avatar in your React application.

You can add the <a href="https://www.npmjs.com/package/@trulience/react-sdk" target="_blank">@trulience/react-sdk</a> package to your project like this:

```bash
npm i @trulience/react-sdk
```

## Usage

After installing the package you can import the `TrulienceAvatar` component using:

```javascript
import { TrulienceAvatar } from "@trulience/react-sdk";
```

And use it within your app like this:

```javascript
const App = () => {
    // your avatar id and token (if using an avatar that requires authentication)
    const config = {
        avatarId: /* your avatar id */,
        token: /* your token */
    };

    // handle trulience events
    const eventCallbacks = {
        "trl-chat": (data) => {
            // handle chat content
        },
        /* ... */
    }

    const avatarRef = useRef(null);
    
    // access the trulience object to send messages
    const sendMessage = React.useCallback((message) => {
        const trulienceObj = avatarRef?.current?.getTrulienceObject();
        trulienceObj.sendMessage(message);
    }, [avatarRef]);

    return (
        <TrulienceAvatar
            ref={avatarRef}
            avatarId={config.avatarId}
            token={config.avatarToken}
            eventCallbacks={eventCallbacks}
            width="100%"
            height="100%"
            />
    );
}
```

You can read our [SDK documentation](/docs/developer/javascript) to find out more about the [events and functions](/docs/developer/javascript#available-events) available on the Trulience object.

## Source

You can look at the source code of the `@trulience/react-sdk` package <a href="https://github.com/trulience/react-sdk" target="_blank">here</a>.