# Implement DeepAR on React App

**URL:** <https://forum.deepar.ai/t/implement-deepar-on-react-app/310>\
**Category:** Help & Questions\
**Tags:** studio-tutorials, studio-info\
**Created:** [May 18, 2023, 7:23pm UTC](https://forum.deepar.ai/t/implement-deepar-on-react-app/310 "2023-05-18T19:23:42Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ramken](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/ramken/32/457_2.png) [@ramken](https://forum.deepar.ai/u/ramken)\
**Post date:** [May 18, 2023, 7:23pm UTC](https://forum.deepar.ai/t/implement-deepar-on-react-app/310/1 "2023-05-18T19:23:42Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jelena](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/jelena/32/14_2.png) [@jelena](https://forum.deepar.ai/u/jelena)\
**Post date:** [May 19, 2023, 2:25pm UTC](https://forum.deepar.ai/t/implement-deepar-on-react-app/310/2 "2023-05-19T14:25:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Randy\_Chapman](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/randy_chapman/32/387_2.png) [@Randy\_Chapman](https://forum.deepar.ai/u/Randy_Chapman)\
**Post date:** [May 19, 2023, 5:18pm UTC](https://forum.deepar.ai/t/implement-deepar-on-react-app/310/3 "2023-05-19T17:18:09Z")

</div>

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:

```auto
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.stopVideo();
            deepAR.shutdown();
            deepAR = null;
        }

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

```

Hopefully this helps!