meta-mosaic 1.0.11 → 1.0.12
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 +25 -11
- package/package.json +34 -4
package/README.md
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
# 🧩 MetaMosaic
|
|
2
2
|
|
|
3
3
|
> A simple and responsive React component to create a mosaic grid of images — with background image, custom styles, and click dialog support.
|
|
4
|
-
|
|
4
|
+
> 
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
[](https://reactjs.org/)
|
|
5
10
|
|
|
6
11
|
---
|
|
7
12
|
|
|
@@ -35,7 +40,8 @@ const images = Array.from({ length: 400 }, (_, i) => ({
|
|
|
35
40
|
title: `Image ${i + 1}`,
|
|
36
41
|
}));
|
|
37
42
|
|
|
38
|
-
const bgImage =
|
|
43
|
+
const bgImage =
|
|
44
|
+
"https://i.etsystatic.com/32237469/r/il/72bad1/4009560313/il_570xN.4009560313_q4ps.jpg";
|
|
39
45
|
|
|
40
46
|
function App() {
|
|
41
47
|
return (
|
|
@@ -82,9 +88,6 @@ export default App;
|
|
|
82
88
|
|
|
83
89
|
## 💡 Example: setDialog
|
|
84
90
|
|
|
85
|
-
<img width="1216" height="707" alt="Screenshot 2025-11-09 at 6 42 50 PM" src="https://github.com/user-attachments/assets/0a81379d-e28d-4671-a749-b881ef68519d" />
|
|
86
|
-
|
|
87
|
-
|
|
88
91
|
```jsx
|
|
89
92
|
setDialog={(img) => (
|
|
90
93
|
<div>
|
|
@@ -118,17 +121,28 @@ The component adjusts automatically based on screen size.
|
|
|
118
121
|
|
|
119
122
|
#### ✨ New Features
|
|
120
123
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
+
- Added all props: `images`, `size`, `bgImageUrl`, `gridWrapperClassName`, `gridWrapperStyle`, `bgPosition`, `width`, `height`, and `setDialog`.
|
|
125
|
+
- Fully responsive and customizable grid.
|
|
126
|
+
- Clickable mosaic cells with custom dialog support.
|
|
124
127
|
|
|
125
128
|
---
|
|
126
129
|
|
|
127
130
|
## 🧠 Tips
|
|
128
131
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
+
- Use high-quality images for better visual effect.
|
|
133
|
+
- The `bgImageUrl` should have similar aspect ratio as your grid.
|
|
134
|
+
- Combine `gridWrapperStyle` with `className` for fine-tuned control.
|
|
135
|
+
|
|
136
|
+
---
|
|
137
|
+
|
|
138
|
+
## Alternatives & Comparisons
|
|
139
|
+
|
|
140
|
+
- `react-mosaic-component` - More complex, for window management
|
|
141
|
+
- `@tilework/mosaic` - E-commerce focused
|
|
142
|
+
- `react-photo-gallery` - Simpler, no dialog support
|
|
143
|
+
- `react-grid-gallery` - Heavy bundle, more features
|
|
144
|
+
|
|
145
|
+
**meta-mosaic** is lightweight and perfect for simple, responsive image grids with metadata.
|
|
132
146
|
|
|
133
147
|
---
|
|
134
148
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "meta-mosaic",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "A React component
|
|
3
|
+
"version": "1.0.12",
|
|
4
|
+
"description": "A simple and responsive React component to create interactive image mosaics with metadata popups, background images, and click-to-enlarge dialogs.",
|
|
5
|
+
"homepage": "https://meta-mosaic-showcase.onrender.com",
|
|
5
6
|
"main": "dist/index.umd.js",
|
|
6
7
|
"module": "dist/index.es.js",
|
|
7
8
|
"files": [
|
|
@@ -21,12 +22,41 @@
|
|
|
21
22
|
"popup",
|
|
22
23
|
"gallery",
|
|
23
24
|
"photo viewer",
|
|
24
|
-
"react library"
|
|
25
|
+
"react library",
|
|
26
|
+
"react",
|
|
27
|
+
"mosaic",
|
|
28
|
+
"gallery",
|
|
29
|
+
"image-gallery",
|
|
30
|
+
"image-grid",
|
|
31
|
+
"responsive-grid",
|
|
32
|
+
"photo-gallery",
|
|
33
|
+
"image-mosaic",
|
|
34
|
+
"popup",
|
|
35
|
+
"dialog",
|
|
36
|
+
"metadata",
|
|
37
|
+
"react-component",
|
|
38
|
+
"grid-layout",
|
|
39
|
+
"image-layout",
|
|
40
|
+
"portfolio",
|
|
41
|
+
"showcase",
|
|
42
|
+
"tiling-window",
|
|
43
|
+
"window-manager",
|
|
44
|
+
"lightbox",
|
|
45
|
+
"photo-viewer",
|
|
46
|
+
"mosaic npm",
|
|
47
|
+
"react image mosaic",
|
|
48
|
+
"react canvas mosaic"
|
|
25
49
|
],
|
|
26
50
|
"author": "Arbaj Ansari",
|
|
27
51
|
"license": "MIT",
|
|
52
|
+
"repository": {
|
|
53
|
+
"type": "git",
|
|
54
|
+
"url": "https://github.com/A-Coder02/meta-mosaic"
|
|
55
|
+
},
|
|
28
56
|
"scripts": {
|
|
29
|
-
"
|
|
57
|
+
"dev": "vite",
|
|
58
|
+
"build": "vite build",
|
|
59
|
+
"preview": "vite preview"
|
|
30
60
|
},
|
|
31
61
|
"peerDependencies": {
|
|
32
62
|
"react": "^19.0.0",
|