{"repo":"fmkra/next-gallery","free":true,"listed":false,"github":"https://github.com/fmkra/next-gallery","clone":"git clone https://github.com/fmkra/next-gallery.git","description":"Next.js component for creating responsive image gallery","language":"TypeScript","stars":54,"topics":["gallery","nextjs","react","next-image"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"next-gallery Responsive photo gallery layout utilities with optional React and Next.js components. The package is split into layers: - next-gallery has no React or Next.js runtime dependency and exports the width calculation utilities. - next-gallery/react adds the generic React gallery component. - next-gallery/next adds the Next.js next/image gallery component. Installation Install the peer dependencies only for the layer you use: - next-gallery : no peers required. - next-gallery/react : requires react . - next-gallery/next : requires react and next . Layout calculations Use the root entry point when you only need the calculated widths. sizes[i] is the array of width percentages for images[i] , one value per ratio. widthLeft contains the remaining width for each ratio. React Use next-gallery/react when you want the gallery layout but need to render your own image component. Next.js Use next-gallery/next for the built-in next/image integration. NextGallery can be used as both a client and server component. It is usually best as a server component because the gallery dimensions are rendered through CSS variables and no layout JavaScript needs to be shipped to the browser. Props - images - array of images where every image is an object with: - src - image source. - aspect ratio - image aspect ratio, calculated as width / height . - alt - optional image alt text. - nextImageProps - next-gallery/next only; additional props passed to Next.js Image . - breakpoints - array of widt","default_branch":null,"files":null,"tree":[],"storefront":"/r/fmkra","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/fmkra/next-gallery/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}