react-motion-gallery 2.0.8 → 2.0.9
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 +11 -11
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -13,7 +13,7 @@ npm install plyr plyr-react
|
|
|
13
13
|
|
|
14
14
|
Import the package stylesheet once. The published bundle ships CSS separately and does not side-effect import it for you.
|
|
15
15
|
|
|
16
|
-
```
|
|
16
|
+
```typescript
|
|
17
17
|
import "react-motion-gallery/dist/index.css";
|
|
18
18
|
```
|
|
19
19
|
|
|
@@ -32,7 +32,7 @@ Mental model:
|
|
|
32
32
|
|
|
33
33
|
`toMediaItems()` accepts string URLs, image/video objects, and node objects, then normalizes them into `MediaItem[]`. String URLs infer `kind` from the file extension.
|
|
34
34
|
|
|
35
|
-
```
|
|
35
|
+
```typescript
|
|
36
36
|
import "react-motion-gallery/dist/index.css";
|
|
37
37
|
import { Slider, toMediaItems, type MediaItem } from "react-motion-gallery";
|
|
38
38
|
|
|
@@ -68,7 +68,7 @@ The package root now exports the primary public components, helper functions, an
|
|
|
68
68
|
|
|
69
69
|
## Slider
|
|
70
70
|
|
|
71
|
-
```
|
|
71
|
+
```typescript
|
|
72
72
|
import { Slider } from "react-motion-gallery";
|
|
73
73
|
|
|
74
74
|
const slides = [
|
|
@@ -249,7 +249,7 @@ export function BasicSlider() {
|
|
|
249
249
|
|
|
250
250
|
### `createSliderIndexChannel`
|
|
251
251
|
|
|
252
|
-
```
|
|
252
|
+
```typescript
|
|
253
253
|
import { Slider, createSliderIndexChannel } from "react-motion-gallery";
|
|
254
254
|
|
|
255
255
|
const channel = createSliderIndexChannel();
|
|
@@ -280,7 +280,7 @@ export function SharedIndexSlider() {
|
|
|
280
280
|
|
|
281
281
|
Use `ThumbnailSlider` when you want a synced thumbnail rail for a base `Slider`. In the common case, share one `createSliderIndexChannel()` instance and pass it to both components.
|
|
282
282
|
|
|
283
|
-
```
|
|
283
|
+
```typescript
|
|
284
284
|
import {
|
|
285
285
|
Slider,
|
|
286
286
|
ThumbnailSlider,
|
|
@@ -406,7 +406,7 @@ The component forwards a ref to its outer thumbnail shell. The explicit `layout`
|
|
|
406
406
|
|
|
407
407
|
## Grid
|
|
408
408
|
|
|
409
|
-
```
|
|
409
|
+
```typescript
|
|
410
410
|
import { Grid } from "react-motion-gallery";
|
|
411
411
|
|
|
412
412
|
const images = Array.from({ length: 6 }, (_, index) => ({
|
|
@@ -463,7 +463,7 @@ Grid fullscreen behavior is provided by `GalleryCore` and `useFullscreenControll
|
|
|
463
463
|
|
|
464
464
|
## Masonry
|
|
465
465
|
|
|
466
|
-
```
|
|
466
|
+
```typescript
|
|
467
467
|
import { Masonry } from "react-motion-gallery";
|
|
468
468
|
|
|
469
469
|
const cards = [280, 360, 220, 420, 300, 340];
|
|
@@ -523,7 +523,7 @@ export function BasicMasonry() {
|
|
|
523
523
|
|
|
524
524
|
`Entries` is the structured-data surface. You pass entry objects, render each media item however you want, and provide a `renderMediaContainer` function that decides whether an entry’s media should be laid out as a slider, grid, or masonry block.
|
|
525
525
|
|
|
526
|
-
```
|
|
526
|
+
```typescript
|
|
527
527
|
import * as React from "react";
|
|
528
528
|
import {
|
|
529
529
|
Entries,
|
|
@@ -704,7 +704,7 @@ export function EntryGallery() {
|
|
|
704
704
|
|
|
705
705
|
Fullscreen is compositional. `GalleryCore` owns the normalized fullscreen item list, your layout opens slides through that core, and `useFullscreenController` renders the portal UI.
|
|
706
706
|
|
|
707
|
-
```
|
|
707
|
+
```typescript
|
|
708
708
|
import * as React from "react";
|
|
709
709
|
import { GalleryCore, Slider, useFullscreenController } from "react-motion-gallery";
|
|
710
710
|
|
|
@@ -740,7 +740,7 @@ export function SliderWithFullscreen() {
|
|
|
740
740
|
|
|
741
741
|
Add fullscreen thumbnails by rendering `FullscreenThumbnailSlider` with the bridge returned from `useFullscreenController`.
|
|
742
742
|
|
|
743
|
-
```
|
|
743
|
+
```typescript
|
|
744
744
|
import { FullscreenThumbnailSlider, useFullscreenController } from "react-motion-gallery";
|
|
745
745
|
|
|
746
746
|
function FullscreenWithThumbs({ thumbs }: { thumbs: string[] }) {
|
|
@@ -995,7 +995,7 @@ The hook returns additional refs and setters for the internal fullscreen runtime
|
|
|
995
995
|
|
|
996
996
|
`Video` is the gallery-aware video primitive. It mounts Plyr lazily, syncs with gallery visibility, and can be used inside `Slider`, `Grid`, `Masonry`, `Entries`, and fullscreen flows.
|
|
997
997
|
|
|
998
|
-
```
|
|
998
|
+
```typescript
|
|
999
999
|
import { Video } from "react-motion-gallery";
|
|
1000
1000
|
|
|
1001
1001
|
export function BasicVideo() {
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-motion-gallery",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.9",
|
|
4
4
|
"description": "React Motion Gallery - smooth, customizable media gallery components",
|
|
5
|
-
"license": "
|
|
5
|
+
"license": "PolyForm-Noncommercial-1.0.0",
|
|
6
6
|
"author": "React Motion Gallery",
|
|
7
7
|
"homepage": "https://react-motion-gallery.com",
|
|
8
8
|
"repository": {
|