リモートワークと仮想会議の時代では、参加者のビデオ タイルを表示するための応答性の高い動的なグリッド システムを作成することが重要です。 Google Meet のようなプラットフォームに触発されて、私は最近、さまざまな参加者数やさまざまな画面サイズにシームレスに適応する柔軟なグリッド システムを React で開発しました。このブログ投稿では、実装手順を説明し、主要なコンポーネントと、それらがどのように連携して効率的で応答性の高いレイアウトを作成するかを説明します。
動的なグリッド システムの作成には、項目 (または「タイル」) の数と利用可能な画面領域に基づいてレイアウトを調整することが含まれます。ビデオ会議アプリケーションの場合、これにより、参加者の数や使用されているデバイスに関係なく、各参加者のビデオ フィードが最適に表示されるようになります。
私が開発したソリューションは、React フックと CSS Grid を活用して、グリッド レイアウトを動的に管理およびレンダリングします。このシステムのコアコンポーネントについて詳しく見ていきましょう。
まず、システムが使用できるグリッド レイアウトを定義します。各レイアウトでは、列と行の数、および収容できるタイルの最小数と最大数の制約が指定されます。
import { useState, useEffect, RefObject } from 'react';
export type GridLayoutDefinition = {
name: string;
columns: number;
rows: number;
minTiles: number;
maxTiles: number;
minWidth: number;
minHeight: number;
};
export const GRID_LAYOUTS: GridLayoutDefinition[] = [
{ columns: 1, rows: 1, name: '1x1', minTiles: 1, maxTiles: 1, minWidth: 0, minHeight: 0 },
{ columns: 1, rows: 2, name: '1x2', minTiles: 2, maxTiles: 2, minWidth: 0, minHeight: 0 },
{ columns: 2, rows: 1, name: '2x1', minTiles: 2, maxTiles: 2, minWidth: 900, minHeight: 0 },
{ columns: 2, rows: 2, name: '2x2', minTiles: 3, maxTiles: 4, minWidth: 560, minHeight: 0 },
{ columns: 3, rows: 3, name: '3x3', minTiles: 5, maxTiles: 9, minWidth: 700, minHeight: 0 },
{ columns: 4, rows: 4, name: '4x4', minTiles: 10, maxTiles: 16, minWidth: 960, minHeight: 0 },
{ columns: 5, rows: 5, name: '5x5', minTiles: 17, maxTiles: 25, minWidth: 1100, minHeight: 0 },
];
タイルの数とコンテナのサイズに基づいて適切なグリッド レイアウトを選択するためのコア ロジックは、selectGridLayout 関数にカプセル化されています。
function selectGridLayout(
layouts: GridLayoutDefinition[],
tileCount: number,
width: number,
height: number,
): GridLayoutDefinition {
let currentLayoutIndex = 0;
let layout = layouts.find((layout_, index, allLayouts) => {
currentLayoutIndex = index;
const isBiggerLayoutAvailable = allLayouts.findIndex((l, i) =>
i > index && l.maxTiles === layout_.maxTiles
) !== -1;
return layout_.maxTiles >= tileCount && !isBiggerLayoutAvailable;
});
if (!layout) {
layout = layouts[layouts.length - 1];
console.warn(`No layout found for: tileCount: ${tileCount}, width/height: ${width}/${height}. Fallback to biggest available layout (${layout?.name}).`);
}
if (layout && (width < layout.minWidth || height < layout.minHeight)) {
if (currentLayoutIndex > 0) {
const smallerLayout = layouts[currentLayoutIndex - 1];
layout = selectGridLayout(
layouts.slice(0, currentLayoutIndex),
smallerLayout.maxTiles,
width,
height,
);
}
}
return layout || layouts[0];
}
初期選択: この関数は、レイアウト配列を反復処理して、maxTiles が tileCount 以上である最初のレイアウトを検索し、同じ maxTiles が使用可能なより大きなレイアウトがないことを確認します。
フォールバック メカニズム: 適切なレイアウトが見つからない場合は、デフォルトで利用可能な最大のレイアウトが使用され、警告がログに記録されます。
レスポンシブ調整: 選択したレイアウトの minWidth または minHeight 制約がコンテナーの寸法を満たしていない場合、関数は制約内に収まる小さいレイアウトを再帰的に選択します。
最終リターン: 選択したレイアウトが返され、グリッドがタイルの数に対して適切であり、コンテナのサイズ内に収まることが保証されます。
グリッド選択ロジックをカプセル化し、コンポーネント間で再利用できるようにするために、useGridLayout カスタム フックを作成しました。
export function useGridLayout(
gridRef: RefObject<HTMLElement>,
tileCount: number
): { layout: GridLayoutDefinition } {
const [layout, setLayout] = useState<GridLayoutDefinition>(GRID_LAYOUTS[0]);
useEffect(() => {
const updateLayout = () => {
if (gridRef.current) {
const { width, height } = gridRef.current.getBoundingClientRect();
const newLayout = selectGridLayout(GRID_LAYOUTS, tileCount, width, height);
setLayout(newLayout);
gridRef.current.style.setProperty('--col-count', newLayout.columns.toString());
gridRef.current.style.setProperty('--row-count', newLayout.rows.toString());
}
};
updateLayout();
window.addEventListener('resize', updateLayout);
return () => window.removeEventListener('resize', updateLayout);
}, [gridRef, tileCount]);
return { layout };
}
パラメータ:
状態管理: useState を使用して現在のレイアウトを追跡し、GRID_LAYOUTS の最初のレイアウトで初期化します。
エフェクトフック:
戻り値: 現在のレイアウト オブジェクトを使用側コンポーネントに提供します。
この動的グリッド システムが実際にどのように機能するかを示すために、useGridLayout フックを使用する React コンポーネントの例を示します。
'use client'
import React, { useState, useRef, useEffect } from 'react'
import { Button } from "@/components/ui/button"
import { useGridLayout, GridLayoutDefinition } from './useGridLayout'
export default function Component() {
const [tiles, setTiles] = useState<number[]>([1, 2, 3, 4]);
const [containerWidth, setContainerWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1000);
const gridRef = useRef<HTMLDivElement>(null);
const { layout } = useGridLayout(gridRef, tiles.length);
useEffect(() => {
const handleResize = () => {
setContainerWidth(window.innerWidth);
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
const addTile = () => setTiles(prev => [...prev, prev.length + 1]);
const removeTile = () => setTiles(prev => prev.slice(0, -1));
return (
<div className="flex flex-col items-center gap-4 p-4 w-full">
<div className="flex flex-wrap justify-center gap-2 mb-4">
<Button onClick={addTile}>Add Tile</Button>
<Button onClick={removeTile}>Remove Tile</Button>
</div>
<div className="w-full border border-gray-300 p-4">
<div
ref={gridRef}
className="grid gap-4"
style={{
gridTemplateColumns: `repeat(var(--col-count), 1fr)`,
gridTemplateRows: `repeat(var(--row-count), 1fr)`,
}}
>
{tiles.slice(0, layout.maxTiles).map((tile) => (
<div key={tile} className="bg-primary text-primary-foreground p-4 rounded flex items-center justify-center">
Tile {tile}
</div>
))}
</div>
</div>
<div className="text-center mt-4">
<p>Current Layout: {layout.name} ({layout.columns}x{layout.rows})</p>
<p>Container Width: {containerWidth}px</p>
<p>Visible Tiles: {Math.min(tiles.length, layout.maxTiles)} / Total Tiles: {tiles.length}</p>
</div>
</div>
)
}
状態管理:
Refs:
Using the Hook:
Event Handling:
Rendering:
The grid's responsiveness is primarily handled via CSS Grid properties and dynamically set CSS variables. Here's a brief overview of how the styling works:
/* Example Tailwind CSS classes used in the component */
/* The actual styles are managed via Tailwind, but the key dynamic properties are set inline */
.grid {
display: grid;
gap: 1rem; /* Adjust as needed */
}
.grid > div {
/* Example styles for tiles */
background-color: var(--color-primary, #3490dc);
color: var(--color-primary-foreground, #ffffff);
padding: 1rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
In the useGridLayout hook, the following CSS variables are set based on the selected layout:
These variables are used to define the gridTemplateColumns and gridTemplateRows properties inline:
style={{
gridTemplateColumns: `repeat(var(--col-count), 1fr)`,
gridTemplateRows: `repeat(var(--row-count), 1fr)`,
}}
This approach ensures that the grid layout adapts seamlessly without the need for extensive CSS media queries.
Building a dynamic grid system for applications like video conferencing requires careful consideration of both the number of elements and the available display space. By defining a set of responsive grid layouts and implementing a custom React hook to manage layout selection, we can create a flexible and efficient system that adapts in real-time to user interactions and screen size changes.
This approach not only enhances the user experience by providing an optimal viewing arrangement but also simplifies the development process by encapsulating the layout logic within reusable components. Whether you're building a video conferencing tool, a dashboard, or any application that requires dynamic content arrangement, this grid system can be a valuable addition to your toolkit.
Feel free to customize and extend this system to suit your specific needs. Happy coding!
以上がReact での応答性の高い会議タイル用の動的グリッド システムの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
