react-flex-images

A lightweight react wrapper for creating fluid galleries as seen on Flickr and Google Images, based on Pixabay/JavaScript-flexImages.

English | 简体中文

✨ 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

📦 Install

$ npm install react-flex-images

🔨 Usage

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