accept dimensions as percentages (#10)

prabhuignoto · Nov 28, 2022 · 0dc5d4d · 0dc5d4d · vercel · Nov 28, 2022
1 parent 4811d5c
commit 0dc5d4d
Show file tree

Hide file tree

Showing 8 changed files with 4,556 additions and 1,951 deletions.
diff --git a/README.md b/README.md
@@ -100,7 +100,17 @@ const images = Array.from({ length: 50 }, (_, i) => ({
 }));
 
 const App = () => {
-  return <Grid images={images} mode="auto" width={1800} height={1200} />;
+  return <Grid images={images} width={1800} height={1200} />;
+};
+```
+
+The dimensions of the grid can be also specified as percentages.
+
+```js
+import { Grid } from "react-visual-grid";
+
+const App = () => {
+  return <Grid images={images} width="90%" height="80%" />;
 };
 ```
 
@@ -111,13 +121,13 @@ const App = () => {
 | enableResize    | Allows the grid to be freely resized                                                      | boolean                   | true                      |
 | gap             | Gap in pixels between the images                                                          | number                    | 20                        |
 | gridLayout      | Sets up the layout of the grid. can be `horizontal` or `vertical`                         | string                    | `vertical`                |
-| height          | Height of the Grid                                                                        | number                    | 600                       |
+| height          | Height of the Grid                                                                        | number or string          | 600                       |
 | imageSizes      | Configures the zoom sizes of the Images                                                   | Object                    | [read more](#image-sizes) |
 | images          | Collection of Images to be rendered                                                       | [ImageProps](#imageprops) | []                        |
 | mode            | Configures the rendering mode. set mode to `manual` to render the columns / rows manually | string                    | `auto`                    |
 | showProgressBar | Prop to show the progress bar                                                             | boolean                   | true                      |
 | theme           | Prop to apply different color scheme for the component                                    | Object                    | [read more](#theme)       |
-| width           | Width of the Grid                                                                         | number                    | 1200                      |
+| width           | Width of the Grid                                                                         | number or string          | 1200                      |
 
 ## 🍭 Demo 1 (Horizontal) <a name = "horizontal"></a>
 

diff --git a/package.json b/package.json
@@ -67,7 +67,7 @@
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-buble": "^1.0.1",
-    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-commonjs": "^23.0.3",
     "@rollup/plugin-eslint": "^9.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-strip": "^3.0.1",
@@ -97,6 +97,8 @@
     "postcss-modules": "^6.0.0",
     "postcss-preset-env": "^7.8.3",
     "postcss-scss": "^4.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup": "^3.5.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-copy": "^3.4.0",