react-flex-images
Version:
A lightweight react wrapper for creating fluid galleries as seen on Flickr and Google Images.
53 lines (37 loc) • 2.03 kB
Markdown
# react-flex-images [](https://www.npmjs.com/package/react-flex-images)
A lightweight react wrapper for creating fluid galleries as seen on Flickr and Google Images, based on [Pixabay/JavaScript-flexImages](https://github.com/Pixabay/JavaScript-flexImages).
English | [简体中文](./README-zh_CN.md)
## ✨ Features
- 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.
## 📃 Example
[](https://codesandbox.io/s/react-flex-images-example-c26qfu)
## 📦 Install
```bash
$ npm install react-flex-images
```
## 🔨 Usage
```jsx
import { FlexImagesContainer, FlexImagesItem } from "react-flex-images";
const App = () => (
<>
<FlexImagesContainer rowHeight={300} maxRows={20} truncate>
<FlexImagesItem imgUrl="..." imgWidth={...} imgHeight={...} />
<FlexImagesItem imgUrl="..." imgWidth={...} imgHeight={...} />
...
</FlexImagesContainer>
</>
);
```
## Settings
| 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. |