Integrate with React app


To integrate the Video SDK using React, you must call some specific functions and return objects before you can stream or make API calls.

We recommend that you use Context to hold the ZoomClient instance. See the React documentation on Context for details.

To do so, first, create a React context:

// ZoomClientContext.js
import React from 'react';
export default React.createContext(null);

In the app entry file (index.js), add the context provider:

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import ZoomContext from './ZoomClientContext';
import ZoomVideo from '@zoom/videosdk';
const client = ZoomVideo.createClient();
ReactDOM.render(
   <ZoomContext.Provider value={client}>
    <App />
  </ZoomContext.Provider>,
  document.getElementById('root')
)

You can access the client object’s properties using the withZoom higher-order component:

// withZoom.js
import React from "react";
import hoistStatics from "hoist-non-react-statics";
import ZoomContext from './ZoomClientContext';
function withZoom(Component){
  const displayName = `withZoom(${Component.displayName || Component.name})`;
  const C = props => {
    const { wrappedComponentRef, ...remainingProps } = props;
    return (
      <ZoomContext.Consumer>
        {context => {
          return (
            <Component
              {...remainingProps}
              client={context}
              ref={wrappedComponentRef}
            />
          );
        }}
      </ZoomContext.Consumer>
    );
  };
  C.displayName = displayName;
  C.WrappedComponent = Component;
  return hoistStatics(C, Component);
}
export default withZoom;

Use ZoomContext:

import React from "react";
import ZoomContext from './ZoomClientContext';
const CustomComponent = (props)=>{
  const client = useContext(ZoomContext);
  
}
export default CustomComponent;

Use withZoom:

import React from "react";
import withZoom from './withZoom';
const CustomComponent = (props)=>{
  const client = props.client;
};
export const default withZoom(CustomComponent);