Implement DeepAR on React App

Hi, does anyone know how to implement DeepAR on React App? I’m not sure if deepar in NPM is outdated or if I’m not doing right. Can I have the code or sample on how to mount this DeepAR in React App?

Hello,The web SDK is a javascript library and you should be able to use it on a web page that works with javascript, You just need to wrap the javascript component. We don’t have an example of this but it shouldn’t be too difficult

FWIW, we are using the latest version in NPM in our app – 5.1.1, IIRC, which matches the SDK documentation as to what the latest version is.

This is a stripped-down version of our code:

import * as deepar from "deepar";
class RecordVideo extends React.Component {
    state = {
        deepARCanvas: React.createRef(),
        // this block called inside componentDidMount
        if (!deepAR) {
            deepAR = await deepar.initialize({
                licenseKey: DEEP_AR_API_KEY,
                canvas: this.state.deepARCanvas.current,

        // this block inside componentWillUnmount
        if (deepAR) {
            deepAR = null;

        // this block inside render()
                                ref={deepARCanvas} ...

Hopefully this helps!

1 Like