@thangdevalone/meet-layout-grid-react 1.0.5 → 1.0.7

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.
Files changed (2) hide show
  1. package/README.md +26 -29
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @thangdevalone/meet-layout-grid-react
2
2
 
3
- React integration for meet-layout-grid with Motion animations.
3
+ React bindings for meet-layout-grid with Motion animations.
4
4
 
5
5
  ## Installation
6
6
 
@@ -8,7 +8,7 @@ React integration for meet-layout-grid with Motion animations.
8
8
  npm install @thangdevalone/meet-layout-grid-react
9
9
  ```
10
10
 
11
- ## Quick Start
11
+ ## Quick start
12
12
 
13
13
  ```tsx
14
14
  import { GridContainer, GridItem } from '@thangdevalone/meet-layout-grid-react'
@@ -35,19 +35,19 @@ function MeetingGrid({ participants }) {
35
35
 
36
36
  ### `<GridContainer>`
37
37
 
38
- Container component that calculates grid layout and provides context.
38
+ Wraps the grid, computes layout, provides context.
39
39
 
40
40
  ```tsx
41
41
  <GridContainer
42
- aspectRatio="16:9" // Item aspect ratio
43
- gap={8} // Gap between items (px)
44
- count={6} // Number of items
45
- layoutMode="gallery" // Layout mode
46
- speakerIndex={0} // Active speaker
47
- pinnedIndex={0} // Pinned item
48
- sidebarPosition="right" // Sidebar position
49
- sidebarRatio={0.25} // Sidebar width ratio
50
- springPreset="smooth" // Animation preset
42
+ aspectRatio="16:9"
43
+ gap={8}
44
+ count={6}
45
+ layoutMode="gallery"
46
+ speakerIndex={0}
47
+ pinnedIndex={0}
48
+ sidebarPosition="right"
49
+ sidebarRatio={0.25}
50
+ springPreset="smooth"
51
51
  >
52
52
  {children}
53
53
  </GridContainer>
@@ -55,13 +55,10 @@ Container component that calculates grid layout and provides context.
55
55
 
56
56
  ### `<GridItem>`
57
57
 
58
- Animated grid item with Motion spring animations.
58
+ One grid cell; uses Motion for layout animation.
59
59
 
60
60
  ```tsx
61
- <GridItem
62
- index={0} // Item index (required)
63
- disableAnimation={false} // Disable animations
64
- >
61
+ <GridItem index={0} disableAnimation={false}>
65
62
  {content}
66
63
  </GridItem>
67
64
  ```
@@ -70,7 +67,7 @@ Animated grid item with Motion spring animations.
70
67
 
71
68
  ### `useGridDimensions(ref)`
72
69
 
73
- Track element dimensions with ResizeObserver.
70
+ Uses ResizeObserver to track element size.
74
71
 
75
72
  ```tsx
76
73
  const ref = useRef<HTMLDivElement>(null)
@@ -80,7 +77,7 @@ const dimensions = useGridDimensions(ref)
80
77
 
81
78
  ### `useMeetGrid(options)`
82
79
 
83
- Calculate grid layout manually.
80
+ Compute grid layout yourself.
84
81
 
85
82
  ```tsx
86
83
  const grid = useMeetGrid({
@@ -95,19 +92,19 @@ const { top, left } = grid.getPosition(index)
95
92
  const { width, height } = grid.getItemDimensions(index)
96
93
  ```
97
94
 
98
- ## Layout Modes
95
+ ## Layout modes
99
96
 
100
- - **gallery** - Equal-sized tiles
101
- - **speaker** - Active speaker larger
102
- - **spotlight** - Single participant focus
103
- - **sidebar** - Main view + thumbnails
97
+ - **gallery** — Same-size tiles
98
+ - **speaker** — One large tile
99
+ - **spotlight** — Single participant
100
+ - **sidebar** — Main + thumbnails
104
101
 
105
- ## Animation Presets
102
+ ## Animation presets
106
103
 
107
- - `snappy` - Quick UI interactions
108
- - `smooth` - Layout changes (default)
109
- - `gentle` - Subtle effects
110
- - `bouncy` - Playful effects
104
+ - `snappy` — Fast feedback
105
+ - `smooth` — Layout changes (default)
106
+ - `gentle` — Subtle
107
+ - `bouncy` — Slight overshoot
111
108
 
112
109
  ## License
113
110
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thangdevalone/meet-layout-grid-react",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
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.0.5"
45
+ "@thangdevalone/meet-layout-grid-core": "1.0.7"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@types/react": "^18.2.0",