{"id":39168631,"url":"https://github.com/fmkra/next-gallery","last_synced_at":"2026-01-17T22:15:42.791Z","repository":{"id":65144926,"uuid":"583432602","full_name":"fmkra/next-gallery","owner":"fmkra","description":"Next.js component for creating responsive image gallery","archived":false,"fork":false,"pushed_at":"2024-10-27T20:20:49.000Z","size":10750,"stargazers_count":55,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"development","last_synced_at":"2025-09-29T15:40:14.903Z","etag":null,"topics":["gallery","next-image","nextjs","react"],"latest_commit_sha":null,"homepage":"https://next-gallery-demo.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fmkra.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-29T19:05:05.000Z","updated_at":"2025-07-23T16:16:28.000Z","dependencies_parsed_at":"2024-06-21T04:30:10.116Z","dependency_job_id":"aa8541ad-a38a-44e9-b327-4b2c393ce9e9","html_url":"https://github.com/fmkra/next-gallery","commit_stats":{"total_commits":72,"total_committers":3,"mean_commits":24.0,"dds":0.06944444444444442,"last_synced_commit":"95e6a6dce82b9690c812d552a3f8fda81497e590"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/fmkra/next-gallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fmkra%2Fnext-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fmkra%2Fnext-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fmkra%2Fnext-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fmkra%2Fnext-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fmkra","download_url":"https://codeload.github.com/fmkra/next-gallery/tar.gz/refs/heads/development","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fmkra%2Fnext-gallery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28519872,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T22:11:28.393Z","status":"ssl_error","status_checked_at":"2026-01-17T22:11:27.841Z","response_time":85,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gallery","next-image","nextjs","react"],"created_at":"2026-01-17T22:15:42.487Z","updated_at":"2026-01-17T22:15:42.786Z","avatar_url":"https://github.com/fmkra.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-gallery\n\n[![license](https://img.shields.io/badge/license-MIT-blue.svg)]()\n[![npm version](https://img.shields.io/badge/npm-v2.1.0-brightgreen)](https://www.npmjs.com/package/next-gallery)\n\nNext.js component for creating responsive image gallery\n\nNow supports Server Components\n\n![Example on desktop](assets/example_3.png?raw=true)\n\n## Installation\n\n```bash\nnpm install next-gallery\n```\n\n## Usage\n\n```tsx\nimport { Gallery } from \"next-gallery\"\n\nconst images = [\n    { src: \"https://picsum.photos/id/1018/1920/1080/\", aspect_ratio: 16/9 },\n    { src: \"https://picsum.photos/id/1015/1920/1080/\", aspect_ratio: 16/9 },\n    ...\n]\nconst widths = [ 500, 1000, 1600 ]\nconst ratios = [ 2.2, 4, 6, 8 ]\n\nexport default function MyGallery() {\n    return (\n        \u003cGallery {...{images, widths, ratios}} /\u003e\n    )\n}\n```\n\nGallery can be used as both client and server component, but **it's recommended to use it as server component** because it will allow to do all calculations on the server and ship no JS to the user. (All image resizing is done by CSS.)\n\nMore examples in [example](example) directory.\n\n## props\n\n-   `images` - array of images where every image is an object with properties:\n    -   `src` - image source\n    -   `aspect_ratio` - image aspect ratio (width / height)\n    -   `alt` (default: `\"\"`) - image alt\n    -   `nextImageProps` (default: `{}`) - object with additional props passed to nextjs' `Image` component. See [next/image](https://nextjs.org/docs/api-reference/next/image#props)\n-   `widths` - array of width breakpoints in pixels (e.g. `[400, 800, 1200]`)\n-   `ratios` - array of aspect ratios. Its length has to be one greater than `widths` array (e.g. `[16/9, 32/9, 48/9, 64/9]` along with `widths` above would result in row of proportion at most 16:9 (e.g. one 16:9 image or two 9:16, etc.) for screen widths 0-400px, 32:9 for 400-800px, etc.)\n-   `percentVw` (default: 100) - percent of viewport width that gallery takes (used for image optimization, doesn't change how gallery looks)\n-   `gap` (default: `\"2px\"`) - gap between images, needs to be valid css value (e.g. `\"2px\"`, `\"2rem\"`, etc.)\n-   `imgLoader` (default: next default loader) - image loader, see [next/image](https://nextjs.org/docs/api-reference/next/image#loader)\n-   `lastRowBehavior` (default: `\"match-previous\"`) - `\"match-previous\"`, `\"fill\"` or `\"preserve\"`. See [last row behavior](#last-row-behavior) section below.\n-   for other props available only for certain `lastRowBehavior` values see [last row behavior](#last-row-behavior) section below.\n-   `overlay` (optional) - It is a function that takes image index and returns `ReactNode` that will be rendered as overlay for every image. Overlay can be used e.g. for displaying text on top of the image or for selecting images (see example below).\n\n```tsx\nimport { Gallery } from 'next-gallery'\n\nconst images = [\n    { src: 'https://picsum.photos/id/1019/1440/1080/', aspect_ratio: 4 / 3 },\n    ...\n]\n\nconst overlays = ['Image 1', ...];\n\nconst overlayStyle = {...} as const;\n\nexport default function Page() {\n    return (\n        \u003cdiv className=\"flex flex-col gap-10\"\u003e\n            \u003cGallery\n                widths={[500, 1000, 1600]}\n                ratios={[2.2, 4, 6, 8]}\n                images={images}\n                lastRowBehavior=\"match-previous\"\n                overlay={(i) =\u003e (\n                    \u003cdiv style={overlayStyle}\u003e\n                        {overlays[i]}\n                    \u003c/div\u003e\n                )}\n            /\u003e\n        \u003c/div\u003e\n    )\n}\n```\n\n## last row behavior\n\nSee [live comparison](https://next-gallery-demo.vercel.app/last-row-behavior) between `lastRowBehavior` options.\n\n### preserve\n\nLast row always has proportion given by `ratios` property. Images align themselves to the left and leave empty space on the right.\n\n### fill\n\nLast row fills whole width of the gallery. (This may cause the last row to look disproportionately high)\n\n-   `threshold` (default: `0`) - number in range `[0,1]` that determines when the last row should be filled. If last row would take more percent of width than `threshold`, it will be expanded to fill the remaining space. Otherwise it behaves like `preserve`. (`threshold = 0` will always fill the last row, `threshold = 1` is equivalent to `preserve`)\n\n### match-previous\n\nIt tries to align last row to the previous one, so that some of the gaps between images in last and second last row align in a straight line.\n\n-   `shrinkLimit` (default: `0.5`) - number in range `[0,1]` that determines how much the last row can shrink. `0` means that there is no limit, `1` means that last row will not shrink at all, `0.5` means that last row can shrink to half of its original size.\n-   `growLimit` (default: `1.5`) - number in range [1,∞] that determines how much the last row can grow. `∞` means that there is no limit, `1` means that last row will not grow at all, `1.5` means that last row can grow by 50% of its original size.\n-   `preferGrow` (default: `2`) - how much is it preferred to grow the last row than shrink it. For example, if set to `2` and the algorithm could choose between growing by `20%` or shrinking by `x`, it would choose to grow when `x \u003e 10%`, otherwise it would shrink. If set to `1`, it always chooses smaller change in percent.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffmkra%2Fnext-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffmkra%2Fnext-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffmkra%2Fnext-gallery/lists"}