@hopin.com/integrations-sdk-react

Hopin Integrations SDK React

Build apps on Hopin. Grow your business.

This package is intended as a complement to the Hopin Integrations SDK. It exports some minimal React hooks that make integrating with the SDK easier from an App.

Minimal Example / Quick Start

const SomeComponent = () => {
  const sdk = useHopinSdk();
  const muted = useReactiveItem(sdk?.media.isMuted);

  const toggleMute = useCallback(
    () => sdk?.media.toggleMute(),
    [sdk]
  );

  return (
    <button onClick={toggleMute}>
      { muted ? 'Unmute me' : 'Mute me' }
    </button>
  )
};

useHopinSdk

Wraps the SDK in a hook, handling the lifecycle of the underlying connection for you and returning a (undefined until connected) instance of the SDK.

useReactiveItem

Gives simple access to values that the SDK exposes to your app, triggering re-renders in your component when the value changes.