LogoLogo
WherebyStatusCommunity
  • 📹Whereby 101
    • Create Your Video Experience
      • Get started in 3 steps
      • Embedding Whereby in a web app
        • Using Whereby's Web Component & Pre-built UI
          • Script Tags
          • With Low Code
            • Embedding in Squarespace or Wordpress
            • No code video conferencing in Bubble
        • Using Whereby's Browser SDK with React Hooks for a fully custom UI
      • Embedding Whereby in a mobile app
        • Embedding Whereby in iOS
          • Using Whereby's Native iOS SDK
        • Embedding Whereby in Android
          • Using Whereby's Native SDK
        • Using Flutter
        • Using React Native
      • Github SDK Examples
      • Meeting scheduling with Cronofy
    • Generating Room URLs
      • Name prefixes
      • Using “Create a room”
      • Using Postman
    • Customize Your Video Experience
      • During room creation
      • Using Attributes/URL Params
      • Global preferences
      • Branding elements
      • Dial-In
      • File sharing
      • Breakout Groups with Embedded
      • Waiting Rooms
    • User roles & Meeting Permissions
    • FAQ
      • Accessibility
      • Whereby Words
      • Firewall & Security
      • HIPAA compliant setup
      • Allowed Domains & Localhost
      • Whereby Embedded Feature Comparison
  • 🔍Meeting Content & Quality
    • Recording
      • Cloud Recording
      • Local Recording
    • Transcribing
      • Session Transcription
      • Recording Transcription
    • Live Captions
    • Session summaries
    • Live streaming RTMP
    • Quality Insights
      • Real-time troubleshooting
      • Using the Insights dashboard
      • Improving call quality
      • Tracking room events with Webhooks
  • 🤷End User
    • End User Support Guides
      • Supported Browsers & Devices
      • Screen Sharing Setup & Usage
      • Using Breakout Groups
      • Troubleshooting & Basics
  • 🚚Developer Guides
    • Quickly deploy Whereby to your domain
    • Tracking Customer Usage
    • Migrating from Twilio
      • Twilio JS SDK Quick Migration
      • Twilio JS SDK Direct Migration
  • 🖥️Reference
    • REST API Reference
      • /meetings
      • /insights
      • /recordings
      • /transcriptions
      • /summaries
      • /rooms
    • Web Component Reference
    • React Hooks Reference
      • Quick Start
        • Getting started with the Browser SDK
      • Guides & Tutorials
        • Migrate from version 2.x to 3
        • Grid logic
        • Custom Video Tiles with React
        • Usage with Next.js
        • How to customize the toolbar
      • API Reference
        • WherebyProvider
        • VideoView
        • VideoGrid
        • useLocalMedia
        • useRoomConnection
      • Types
    • React Native Reference
      • Quick Start
      • WherebyEmbed
    • Webhooks Reference
Powered by GitBook
On this page
  • Properties
  • Usage

Was this helpful?

Edit on GitHub
  1. Reference
  2. React Hooks Reference
  3. API Reference

VideoGrid

Last updated 11 months ago

Was this helpful?

<VideoGrid />

The VideoGrid component renders a grid with all participants in the room rendered in one of 3 layouts: PresentationGrid, VideoGrid and Subgrid. The grid behaves like a normal Whereby room, with rules for which participants are rendered in which grid layout at any point in time. To see how the grid logic behaves, please see the .

Properties

Property
Required
Type
Description

videoGridGap

number

The gap between each video cell in pixels. Defaults to 8.

Usage

    const [isLocalScreenshareActive, setIsLocalScreenshareActive] = useState(false);

    const { actions } = useRoomConnection(roomUrl, { localMediaOptions: { audio: false, video: true } });
    const { toggleCamera, toggleMicrophone, startScreenshare, stopScreenshare} = actions;

    return (
        <>
            <div className="controls">
                <button onClick={() => toggleCamera()}>Toggle camera</button>
                <button onClick={() => toggleMicrophone()}>Toggle microphone</button>
                <button
                    onClick={() => {
                        if (isLocalScreenshareActive) {
                            stopScreenshare();
                        } else {
                            startScreenshare();
                        }
                        setIsLocalScreenshareActive((prev) => !prev);
                    }}
                >
                    Toggle screenshare
                </button>
            </div>
            <div style={{ height: "500px", width: "100%" }}>
                <VideoGrid videoGridGap={10} />
            </div>
        </>
    );
};
🖥️
grid logic page