A lightweight react wrapper for creating fluid galleries as seen on Flickr and Google Images, based on Pixabay/JavaScript-flexImages.
English | 简体中文
- Lightweight: 4.8 kB of JavaScript - less than 1.8 kB gzipped
- Source images/objects can have any size
- Responsive
- Equal margins between images controlled via CSS
- No cropping or reordering
- AJAX ready, e.g. for infinite scrolling
- Layout options to control e.g. the maximum number of rows - or whether or not to display an incomplete (last) row.
$ npm install react-flex-images
import { FlexImagesContainer, FlexImagesItem } from "react-flex-images";
const App = () => (
<>
<FlexImagesContainer rowHeight={300} maxRows={20} truncate>
<FlexImagesItem imgUrl="..." imgWidth={...} imgHeight={...} />
<FlexImagesItem imgUrl="..." imgWidth={...} imgHeight={...} />
...
</FlexImagesContainer>
</>
);
Property | Default | Description |
---|---|---|
rowHeight | 300 | Maximum height of a row. |
maxRows | null | Maximum number of rows to display. Images/Objects exceeding this row are hidden. |
truncate | false | Hide incomplete last row of images/objects. |