@thangdevalone/meet-layout-grid-react 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -64
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# @thangdevalone/meet-layout-grid-react
|
|
2
2
|
|
|
3
|
-
React bindings for meet-layout-grid with Motion animations.
|
|
3
|
+
React 18+ bindings for meet-layout-grid with Motion animations.
|
|
4
|
+
|
|
5
|
+
> For full documentation, layout modes, and API reference, see the [main README](https://github.com/thangdevalone/meet-layout-grid#readme).
|
|
4
6
|
|
|
5
7
|
## Installation
|
|
6
8
|
|
|
@@ -8,19 +10,14 @@ React bindings for meet-layout-grid with Motion animations.
|
|
|
8
10
|
npm install @thangdevalone/meet-layout-grid-react
|
|
9
11
|
```
|
|
10
12
|
|
|
11
|
-
## Quick
|
|
13
|
+
## Quick Start
|
|
12
14
|
|
|
13
15
|
```tsx
|
|
14
16
|
import { GridContainer, GridItem } from '@thangdevalone/meet-layout-grid-react'
|
|
15
17
|
|
|
16
18
|
function MeetingGrid({ participants }) {
|
|
17
19
|
return (
|
|
18
|
-
<GridContainer
|
|
19
|
-
aspectRatio="16:9"
|
|
20
|
-
gap={8}
|
|
21
|
-
layoutMode="gallery"
|
|
22
|
-
count={participants.length}
|
|
23
|
-
>
|
|
20
|
+
<GridContainer aspectRatio="16:9" gap={8} layoutMode="gallery" count={participants.length}>
|
|
24
21
|
{participants.map((p, index) => (
|
|
25
22
|
<GridItem key={p.id} index={index}>
|
|
26
23
|
<VideoTile participant={p} />
|
|
@@ -35,75 +32,64 @@ function MeetingGrid({ participants }) {
|
|
|
35
32
|
|
|
36
33
|
### `<GridContainer>`
|
|
37
34
|
|
|
38
|
-
Wraps the grid, computes layout, provides context.
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
```
|
|
35
|
+
Wraps the grid, computes layout, and provides context to children.
|
|
36
|
+
|
|
37
|
+
| Prop | Type | Default | Description |
|
|
38
|
+
| ------------------ | -------------- | ----------- | ------------------------------ |
|
|
39
|
+
| `aspectRatio` | `string` | `'16:9'` | Default tile aspect ratio |
|
|
40
|
+
| `gap` | `number` | `8` | Gap between tiles (px) |
|
|
41
|
+
| `count` | `number` | required | Number of items |
|
|
42
|
+
| `layoutMode` | `LayoutMode` | `'gallery'` | `gallery` \| `spotlight` |
|
|
43
|
+
| `pinnedIndex` | `number` | - | Pinned participant index |
|
|
44
|
+
| `othersPosition` | `string` | `'right'` | Thumbnail position in pin mode |
|
|
45
|
+
| `springPreset` | `SpringPreset` | `'smooth'` | Animation preset |
|
|
46
|
+
| `maxItemsPerPage` | `number` | - | Max items per page |
|
|
47
|
+
| `currentPage` | `number` | `0` | Current page |
|
|
48
|
+
| `maxVisible` | `number` | - | Max visible in others area |
|
|
49
|
+
| `itemAspectRatios` | `array` | - | Per-item aspect ratios |
|
|
54
50
|
|
|
55
51
|
### `<GridItem>`
|
|
56
52
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
```tsx
|
|
60
|
-
<GridItem index={0} disableAnimation={false}>
|
|
61
|
-
{content}
|
|
62
|
-
</GridItem>
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
## Hooks
|
|
53
|
+
Single grid cell with Motion layout animation.
|
|
66
54
|
|
|
67
|
-
|
|
55
|
+
| Prop | Type | Default | Description |
|
|
56
|
+
| ------------------ | --------- | -------- | ------------------------ |
|
|
57
|
+
| `index` | `number` | required | Item index |
|
|
58
|
+
| `disableAnimation` | `boolean` | `false` | Disable layout animation |
|
|
68
59
|
|
|
69
|
-
|
|
60
|
+
Render prop: `{({ contentDimensions, isLastVisibleOther, hiddenCount }) => ...}`
|
|
70
61
|
|
|
71
|
-
|
|
72
|
-
const ref = useRef<HTMLDivElement>(null)
|
|
73
|
-
const dimensions = useGridDimensions(ref)
|
|
74
|
-
// { width: number, height: number }
|
|
75
|
-
```
|
|
62
|
+
### `<FloatingGridItem>`
|
|
76
63
|
|
|
77
|
-
|
|
64
|
+
Draggable Picture-in-Picture overlay with corner snapping.
|
|
78
65
|
|
|
79
|
-
|
|
66
|
+
| Prop | Type | Default | Description |
|
|
67
|
+
| ---------------- | ---------- | ---------------- | ---------------------------- |
|
|
68
|
+
| `width` | `number` | - | Floating item width |
|
|
69
|
+
| `height` | `number` | - | Floating item height |
|
|
70
|
+
| `anchor` | `string` | `'bottom-right'` | Corner anchor position |
|
|
71
|
+
| `visible` | `boolean` | `true` | Show/hide the floating item |
|
|
72
|
+
| `edgePadding` | `number` | - | Padding from container edges |
|
|
73
|
+
| `borderRadius` | `number` | - | Border radius |
|
|
74
|
+
| `onAnchorChange` | `function` | - | Callback when anchor changes |
|
|
80
75
|
|
|
81
|
-
|
|
82
|
-
const grid = useMeetGrid({
|
|
83
|
-
dimensions: { width: 800, height: 600 },
|
|
84
|
-
count: 6,
|
|
85
|
-
aspectRatio: '16:9',
|
|
86
|
-
gap: 8,
|
|
87
|
-
layoutMode: 'sidebar',
|
|
88
|
-
sidebarPosition: 'bottom', // speaker-like layout
|
|
89
|
-
})
|
|
90
|
-
|
|
91
|
-
const { top, left } = grid.getPosition(index)
|
|
92
|
-
const { width, height } = grid.getItemDimensions(index)
|
|
93
|
-
```
|
|
76
|
+
### `<GridOverlay>`
|
|
94
77
|
|
|
95
|
-
|
|
78
|
+
Full-grid overlay for screen sharing, whiteboard, etc.
|
|
96
79
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
80
|
+
| Prop | Type | Default | Description |
|
|
81
|
+
| ----------------- | --------- | ------- | ------------------------ |
|
|
82
|
+
| `visible` | `boolean` | `false` | Show/hide the overlay |
|
|
83
|
+
| `backgroundColor` | `string` | - | Overlay background color |
|
|
100
84
|
|
|
101
|
-
##
|
|
85
|
+
## Hooks
|
|
102
86
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
87
|
+
| Hook | Description |
|
|
88
|
+
| ------------------------ | ----------------------------------------- |
|
|
89
|
+
| `useGridDimensions(ref)` | Track element size via ResizeObserver |
|
|
90
|
+
| `useMeetGrid(options)` | Compute grid layout programmatically |
|
|
91
|
+
| `useGridContext()` | Access grid context from child components |
|
|
92
|
+
| `useGridAnimation()` | Access animation config from context |
|
|
107
93
|
|
|
108
94
|
## License
|
|
109
95
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thangdevalone/meet-layout-grid-react",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "React integration for meet-layout-grid with Motion animations",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"motion": "^11.15.0",
|
|
45
|
-
"@thangdevalone/meet-layout-grid-core": "1.1.
|
|
45
|
+
"@thangdevalone/meet-layout-grid-core": "1.1.1"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@types/react": "^18.2.0",
|