# ReactJS with Zoom WebSDK\_Component view\_ Integration

**URL:** <https://devforum.zoom.us/t/reactjs-with-zoom-websdk-component-view-integration/82757>\
**Category:** Web\
**Created:** [February 8, 2023, 1:40am UTC](https://devforum.zoom.us/t/reactjs-with-zoom-websdk-component-view-integration/82757 "2023-02-08T01:40:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Takuya](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/takuya/32/20770_2.png) [@Takuya](https://devforum.zoom.us/u/Takuya)\
**Post date:** [February 8, 2023, 1:40am UTC](https://devforum.zoom.us/t/reactjs-with-zoom-websdk-component-view-integration/82757/1 "2023-02-08T01:40:24Z")

</div>

Hello!  
I would like to display a Zoom component view (web) at the same time as a React component (sidebar, etc.) that I have created. I tried to do this by referring to a Youtube video, which explained that the problem can be solved by writing the following in the css file, but this time the screen went completely blank.

#zmmtg-root {  
display: none;  
}

If anyone has had a similar problem in the past and knows how to solve it, I would appreciate your advice.  
(It would also be helpful if you could show us some sample jsx code, etc.)

Thank you.

---

<div class="post-metadata">

**Author:** ![Takuya](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/takuya/32/20770_2.png) [@Takuya](https://devforum.zoom.us/u/Takuya)\
**Post date:** [February 8, 2023, 11:05pm UTC](https://devforum.zoom.us/t/reactjs-with-zoom-websdk-component-view-integration/82757/2 "2023-02-08T23:05:51Z")

</div>

import { useEffect } from ‘react’;  
import router from ‘next/router’;

const axios=require(‘axios’);  
import MeetingStyles from “…/styles/zoom.module.css”;

const Meeting=()=\>{

```
useEffect(()=>{
    return async ()=>
    {
        new Promise(async (resolve, reject)=>{
            const ZoomEmbed=await(await import('@zoomus/websdk/embedded')).default;

            resolve(ZoomEmbed.createClient())
        }).then(async (client)=>{
            let meetingSDKElement=document.getElementById('meetingSDKElement');

            client.init({
                language:'en-US',
                zoomAppRoot:meetingSDKElement,
                customize:{
                    video:{
                        viewSizes:{

                        }
                    },
                    chat:{
                        popper:{
                            placement:'right',
                            height:300,
                            width:300
                        },
                        ribbon:{
                            width:400
                        }
                    }
                }
            });

            let payload=router.query;

            const {data}=await axios({
                url:'/api/Zoom',
                method:'post',
                data:payload
            }).then(response=>{
                return response;
            }).catch(error=>{
                console.log('-- signature axios request error-->', error);
            });
            client.join({
                meetingNumber:payload.meetingNumber,
                signature:data.signature,
                sdkKey:data.sdkKey,
                userName:payload.userName,
                password:payload.password,
                tk:''
            });
        }).catch(error=>{
            console.log('Error inside useEffect -->', error);
        });
    }
});

return (<div className={MeetingStyles.container}>
    <div className={MeetingStyles.meetingSDKElement} id='meetingSDKElement'></div>
    <div className={MeetingStyles.content}>Content</div>
</div>)

```

}

Meeting.displayName=‘Zoom Component View’;

export default Meeting;

---

<div class="post-metadata">

**Author:** ![Takuya](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/takuya/32/20770_2.png) [@Takuya](https://devforum.zoom.us/u/Takuya)\
**Post date:** [February 8, 2023, 11:06pm UTC](https://devforum.zoom.us/t/reactjs-with-zoom-websdk-component-view-integration/82757/3 "2023-02-08T23:06:31Z")

</div>

Created by Next.js. I would like to change this to work with react, but if I substitute the import router from ‘next/router’; part with react, I would like to know which module I need to import.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [March 11, 2023, 9:06am UTC](https://devforum.zoom.us/t/reactjs-with-zoom-websdk-component-view-integration/82757/4 "2023-03-11T09:06:59Z")

</div>

Closed on March 11, 2023, 9:06am UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.