react-justified-layout-ts 1.0.1 → 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Alan19
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,42 @@
+A TypeScript component similar to Flickr's justified layout.
+
+# Usage
+
+---
+Add the `TSJustifiedLayout` component to your code with the following props:
+- `layoutItems: number[];` - An array of aspect ratios for the images you are adding to the grid
+- `itemSpacing?: number;` - The amount of spacing between each image, in pixels. (Default: 10)
+- `rowSpacing?: number;` - The amount of spacing between each row, in pixels. (Default: 10)
+- `targetRowHeight?: number;` - The target row height for a row, in pixels. (Default: 320)
+- `targetRowHeightTolerance?: number;` - The amount the row height could deviate from the target row height, as a percent. (Default: .25)
+- `width: number;` - The width of the container. I would use something like `react-use-measure` if you're trying to make it dynamically take up the size of the parent container.
+- `children: any[];` - The children elements that makes up the grid.
+- `showWidows?: boolean;` - If the last row should be shown. (Default: true)
+
+## Example Usage
+```typescript jsx
+<TSJustifiedLayout width={width}
+    layoutItems={imagesOnPage.map(value => ({
+       dimensions: value.aspectRatio || 1
+    }))}>
+        {imagesOnPage.map(value => <img
+            src={value.src}
+            alt={value.alt}
+        />)}
+</TSJustifiedLayout>
+```
+
+# Install
+
+---
+`npm i react-justified-layout-ts`
+
+# Credits
+
+--- 
+The display logic for the layout and the math used to calculate the row height for each row is adapted from [Flickr's Justified Layout library](https://github.com/flickr/justified-layout).
+
+# License
+
+---
+Open Source Licensed under the MIT license.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-justified-layout-ts",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A component based off Flickr's justified layout that is compatible with Typescript",
   "main": "./dist/TSJustifiedLayout.js",
   "types": "./dist/TSJustifiedLayout.d.ts",
@@ -22,5 +22,6 @@
   },
   "peerDependencies": {
     "react": "^18.2.0"
-  }
+  },
+  "repository": "https://github.com/Alan19/react-justified-layout-ts"
 }