Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-grid-gallery
Advanced tools
react-grid-gallery - npm Package Compare versions
Comparing version 1.0.0-alpha.0 to 1.0.0-alpha.1
@@ -27,2 +27,6 @@ 'use strict'; | ||
| const SELECTION_MARGIN = 16; | ||
| const gallery = { | ||
| display: "flex", | ||
| flexWrap: "wrap", | ||
| }; | ||
| const thumbnail = ({ item }) => { | ||
@@ -90,3 +94,2 @@ const rotationTransformValue = rotationTransformMap[item.orientation]; | ||
| position: "relative", | ||
| float: "left", | ||
| background: "#eee", | ||
@@ -352,3 +355,3 @@ padding: "0px", | ||
| }; | ||
| return (jsxRuntime.jsxs("div", { id: props.id, className: "ReactGridGallery", ref: galleryRef, children: [jsxRuntime.jsx(ResizeListener, { onResize: handleResize }), thumbnails.map((item, index) => (jsxRuntime.jsx(Image, { item: item, index: index, margin: margin, height: rowHeight, isSelectable: enableImageSelection, onClick: handleClick, onSelect: handleSelect, tagStyle: props.tagStyle, tileViewportStyle: props.tileViewportStyle, thumbnailStyle: props.thumbnailStyle, thumbnailImageComponent: props.thumbnailImageComponent }, item.key || index)))] })); | ||
| return (jsxRuntime.jsxs("div", { id: props.id, className: "ReactGridGallery", ref: galleryRef, children: [jsxRuntime.jsx(ResizeListener, { onResize: handleResize }), jsxRuntime.jsx("div", { style: gallery, children: thumbnails.map((item, index) => (jsxRuntime.jsx(Image, { item: item, index: index, margin: margin, height: rowHeight, isSelectable: enableImageSelection, onClick: handleClick, onSelect: handleSelect, tagStyle: props.tagStyle, tileViewportStyle: props.tileViewportStyle, thumbnailStyle: props.thumbnailStyle, thumbnailImageComponent: props.thumbnailImageComponent }, item.key || index))) })] })); | ||
| }; | ||
@@ -355,0 +358,0 @@ Gallery.displayName = "Gallery"; |
@@ -23,2 +23,6 @@ import { jsx, jsxs } from 'react/jsx-runtime'; | ||
| const SELECTION_MARGIN = 16; | ||
| const gallery = { | ||
| display: "flex", | ||
| flexWrap: "wrap", | ||
| }; | ||
| const thumbnail = ({ item }) => { | ||
@@ -86,3 +90,2 @@ const rotationTransformValue = rotationTransformMap[item.orientation]; | ||
| position: "relative", | ||
| float: "left", | ||
| background: "#eee", | ||
@@ -348,3 +351,3 @@ padding: "0px", | ||
| }; | ||
| return (jsxs("div", { id: props.id, className: "ReactGridGallery", ref: galleryRef, children: [jsx(ResizeListener, { onResize: handleResize }), thumbnails.map((item, index) => (jsx(Image, { item: item, index: index, margin: margin, height: rowHeight, isSelectable: enableImageSelection, onClick: handleClick, onSelect: handleSelect, tagStyle: props.tagStyle, tileViewportStyle: props.tileViewportStyle, thumbnailStyle: props.thumbnailStyle, thumbnailImageComponent: props.thumbnailImageComponent }, item.key || index)))] })); | ||
| return (jsxs("div", { id: props.id, className: "ReactGridGallery", ref: galleryRef, children: [jsx(ResizeListener, { onResize: handleResize }), jsx("div", { style: gallery, children: thumbnails.map((item, index) => (jsx(Image, { item: item, index: index, margin: margin, height: rowHeight, isSelectable: enableImageSelection, onClick: handleClick, onSelect: handleSelect, tagStyle: props.tagStyle, tileViewportStyle: props.tileViewportStyle, thumbnailStyle: props.thumbnailStyle, thumbnailImageComponent: props.thumbnailImageComponent }, item.key || index))) })] })); | ||
| }; | ||
@@ -351,0 +354,0 @@ Gallery.displayName = "Gallery"; |
@@ -97,2 +97,6 @@ (function (global, factory) { | ||
| var SELECTION_MARGIN = 16; | ||
| var gallery = { | ||
| display: "flex", | ||
| flexWrap: "wrap", | ||
| }; | ||
| var thumbnail = function (_a) { | ||
@@ -167,3 +171,2 @@ var item = _a.item; | ||
| position: "relative", | ||
| float: "left", | ||
| background: "#eee", | ||
@@ -434,3 +437,3 @@ padding: "0px", | ||
| }; | ||
| return (jsxRuntime.exports.jsxs("div", __assign({ id: props.id, className: "ReactGridGallery", ref: galleryRef }, { children: [jsxRuntime.exports.jsx(ResizeListener, { onResize: handleResize }), thumbnails.map(function (item, index) { return (jsxRuntime.exports.jsx(Image, { item: item, index: index, margin: margin, height: rowHeight, isSelectable: enableImageSelection, onClick: handleClick, onSelect: handleSelect, tagStyle: props.tagStyle, tileViewportStyle: props.tileViewportStyle, thumbnailStyle: props.thumbnailStyle, thumbnailImageComponent: props.thumbnailImageComponent }, item.key || index)); })] }))); | ||
| return (jsxRuntime.exports.jsxs("div", __assign({ id: props.id, className: "ReactGridGallery", ref: galleryRef }, { children: [jsxRuntime.exports.jsx(ResizeListener, { onResize: handleResize }), jsxRuntime.exports.jsx("div", __assign({ style: gallery }, { children: thumbnails.map(function (item, index) { return (jsxRuntime.exports.jsx(Image, { item: item, index: index, margin: margin, height: rowHeight, isSelectable: enableImageSelection, onClick: handleClick, onSelect: handleSelect, tagStyle: props.tagStyle, tileViewportStyle: props.tileViewportStyle, thumbnailStyle: props.thumbnailStyle, thumbnailImageComponent: props.thumbnailImageComponent }, item.key || index)); }) }))] }))); | ||
| }; | ||
@@ -437,0 +440,0 @@ Gallery.displayName = "Gallery"; |
| { | ||
| "name": "react-grid-gallery", | ||
| "version": "1.0.0-alpha.0", | ||
| "version": "1.0.0-alpha.1", | ||
| "description": "Justified gallery component for React.", | ||
@@ -70,3 +70,2 @@ "types": "dist/react-grid-gallery.d.ts", | ||
| "react-component", | ||
| "lightbox", | ||
| "image", | ||
@@ -73,0 +72,0 @@ "images", |
@@ -64,33 +64,33 @@ # React Grid Gallery | ||
| | Property | Type | Default | Description | | ||
| |:-----------------|:------------------------|:----------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | src | string | undefined | Required. A string referring to any valid image resource (file, url, etc). | | ||
| | width | number | undefined | Required. Width of the image. | | ||
| | height | number | undefined | Required. Height of the image. | | ||
| | nano | string:base64 | undefined | Optional. Thumbnail Base64 image will be injected to background under the main image. This provides a base64, 4x4 generated image whilst the image is being loaded. | | ||
| | alt | string | "" | Optional. Image alt attribute. | | ||
| | tags | array | undefined | Optional. An array of objects containing tag attributes (value, title and key if value is element). e.g. `{value: "foo", title: "bar"}` or `{value: <a href={tag.url}>{tag.name}</a>, title: tag.title, key: tag.key}` | | ||
| | isSelected | bool | undefined | Optional. The selected state of the image. | | ||
| | caption | string | ReactNode | undefined | Optional. Image caption. | | ||
| | customOverlay | element | undefined | Optional. A custom element to be rendered as a thumbnail overlay on hover. | | ||
| | thumbnailCaption | string | ReactNode | undefined | Optional. A thumbnail caption shown below thumbnail. | | ||
| | orientation | number | undefined | Optional. Orientation of the image. Many newer digital cameras (both dSLR and Point & Shoot digicams) have a built-in orientation sensor. The output of this sensor is used to set the EXIF orientation flag in the image file's metatdata to reflect the positioning of the camera with respect to the ground (See [EXIF Orientation Page](http://jpegclub.org/exif_orientation.html) for more info). | | ||
| | Property | Type | Description | | ||
| |:-----------------|:------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | src | string | Required. A string referring to any valid image resource (file, url, etc). | | ||
| | width | number | Required. Width of the image. | | ||
| | height | number | Required. Height of the image. | | ||
| | nano | string:base64 | Optional. Thumbnail Base64 image will be injected to background under the main image. This provides a base64, 4x4 generated image whilst the image is being loaded. | | ||
| | alt | string | Optional. Image alt attribute. | | ||
| | tags | array | Optional. An array of objects containing tag attributes (value, title and key if value is element). e.g. `{value: "foo", title: "bar"}` or `{value: <a href={tag.url}>{tag.name}</a>, title: tag.title, key: tag.key}` | | ||
| | isSelected | bool | Optional. The selected state of the image. | | ||
| | caption | string | ReactNode | Optional. Image caption. | | ||
| | customOverlay | element | Optional. A custom element to be rendered as a thumbnail overlay on hover. | | ||
| | thumbnailCaption | string | ReactNode | Optional. A thumbnail caption shown below thumbnail. | | ||
| | orientation | number | Optional. Orientation of the image. Many newer digital cameras (both dSLR and Point & Shoot digicams) have a built-in orientation sensor. The output of this sensor is used to set the EXIF orientation flag in the image file's metatdata to reflect the positioning of the camera with respect to the ground (See [EXIF Orientation Page](http://jpegclub.org/exif_orientation.html) for more info). | | ||
| ## Gallery Options | ||
| | Property | Type | Default | Description | | ||
| |:------------------------|:--------------------------|:-------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | images | array | undefined | Required. An array of objects containing image properties (see Image Options above). | | ||
| | id | string | "ReactGridGallery" | Optional. `id` attribute for `<Gallery>` tag. This prop may be useful for those who wish to discriminate between multiple galleries. | | ||
| | enableImageSelection | bool | true | Optional. Allow images to be selectable. Setting this option to `false` whilst supplying images with `isSelected: true` will result in those images being permanently selected. | | ||
| | onSelect | func | undefined | Optional. Function to execute when an image is selected. Optional args: `index` (index of selected image in images array), `image` (the selected image), `event`. This function is only executable when `enableImageSelection: true`. | | ||
| | rowHeight | number | 180 | Optional. The height of each row in the gallery. | | ||
| | maxRows | number | undefined | Optional. The maximum number of rows to show in the gallery. | | ||
| | margin | number | 2 | Optional. The margin around each image in the gallery. | | ||
| | onClick | func | undefined | Optional. Function to execute when gallery image clicked. Optional args: `index` (index of selected image in images array), `image` (the clicked image), event (the click event). | | ||
| | tagStyle | func | CSSProperties | tagStyle | Optional. Style or function that returns style to pass to tag elements. Optional args: `item` (the image item in `images`). Overrides internal tag style. | | ||
| | tileViewportStyle | func | CSSProperties | tileViewportStyle | Optional. Style or function to style the image tile viewport. Optional args: `item` (the image item in `images`). Overrides internal tileViewportStyle function. | | ||
| | thumbnailStyle | func | CSSProperties | thumbnailStyle | Optional. Style or function to style the image thumbnail. Optional args: `item` (the image item in `images`). Overrides internal thumbnailStyle function. | | ||
| | thumbnailImageComponent | React component | undefined | Optional. Substitute in a React component that would get passed `imageProps` (the props that would have been passed to the `<img>` tag) and `item` (the original item in `images`) to be used to render thumbnails; useful for lazy loading. | | ||
| | defaultContainerWidth | number | 0 | Optional. Set default width for the container. This option is useful during server-side rendering when we want to generate an initial markup before we can detect the actual container width. | | ||
| | Property | Type | Description | | ||
| |:------------------------|:--------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | images | array | Required. An array of objects containing image properties (see Image Options above). | | ||
| | id | string | Optional, default `ReactGridGallery`. `id` attribute for `<Gallery>` tag. This prop may be useful for those who wish to discriminate between multiple galleries. | | ||
| | enableImageSelection | bool | Optional, default `true`. Allow images to be selectable. Setting this option to `false` whilst supplying images with `isSelected: true` will result in those images being permanently selected. | | ||
| | onSelect | func | Optional. Function to execute when an image is selected. Optional args: `index` (index of selected image in images array), `image` (the selected image), `event`. This function is only executable when `enableImageSelection: true`. | | ||
| | rowHeight | number | Optional, default `180`. The height of each row in the gallery. | | ||
| | maxRows | number | Optional. The maximum number of rows to show in the gallery. | | ||
| | margin | number | Optional, default `2`. The margin around each image in the gallery. | | ||
| | onClick | func | Optional. Function to execute when gallery image clicked. Optional args: `index` (index of selected image in images array), `image` (the clicked image), event (the click event). | | ||
| | tagStyle | func | CSSProperties | Optional. Style or function that returns style to pass to tag elements. Optional args: `item` (the image item in `images`). Overrides internal tag style. | | ||
| | tileViewportStyle | func | CSSProperties | Optional. Style or function to style the image tile viewport. Optional args: `item` (the image item in `images`). Overrides internal tileViewportStyle function. | | ||
| | thumbnailStyle | func | CSSProperties | Optional. Style or function to style the image thumbnail. Optional args: `item` (the image item in `images`). Overrides internal thumbnailStyle function. | | ||
| | thumbnailImageComponent | React component | Optional. Substitute in a React component that would get passed `imageProps` (the props that would have been passed to the `<img>` tag) and `item` (the original item in `images`) to be used to render thumbnails; useful for lazy loading. | | ||
| | defaultContainerWidth | number | Optional. Set default width for the container. This option is useful during server-side rendering when we want to generate an initial markup before we can detect the actual container width. | | ||
@@ -155,8 +155,8 @@ | ||
| * Demo stock photos: | ||
| * [Jeshu John - designerspics.com](http://designerspics.com) | ||
| * [Gratisography](http://gratisography.com) | ||
| * [Tom Eversley - isorepublic.com](http://isorepublic.com) | ||
| * [Jan Vasek - jeshoots.com](http://jeshoots.com) | ||
| * [moveast.me](http://moveast.me) | ||
| * [贝莉儿 NG. - unsplash.com](http://unsplash.com) | ||
| * [Matthew Wiebe. - unsplash.com](unsplash.com) | ||
| * [Jeshu John - designerspics.com](https://designerspics.com) | ||
| * [Gratisography](https://gratisography.com) | ||
| * [Tom Eversley - isorepublic.com](https://isorepublic.com) | ||
| * [Jan Vasek - jeshoots.com](https://unsplash.com/) | ||
| * [moveast.me](https://moveast.me) | ||
| * [贝莉儿 NG. - unsplash.com](https://unsplash.com/) | ||
| * [Matthew Wiebe. - unsplash.com](https://unsplash.com/) |
@@ -35,2 +35,7 @@ import { CSSProperties } from "react"; | ||
| export const gallery: CSSProperties = { | ||
| display: "flex", | ||
| flexWrap: "wrap", | ||
| }; | ||
| export const thumbnail = ({ item }: { item: ImageExtended }): CSSProperties => { | ||
@@ -114,3 +119,2 @@ const rotationTransformValue = rotationTransformMap[item.orientation]; | ||
| position: "relative", | ||
| float: "left", | ||
| background: "#eee", | ||
@@ -117,0 +121,0 @@ padding: "0px", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.54%
214613
- Lines of code
- increased by0.87%
1965
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes